Free Sample Lesson
Every week Creative Coding Club members get a new lesson.
Enjoy this free sample.
Today I'm going to give you a quick walk-through of designing a simple banner in Boxy SVG and animating on CodePen with GSAP.
It will be mostly review of things we learned in the previous 6 chapters of SVG Animation with GreenSock, but as always, there are a few new treats thrown in along the way.
Even if you only know the GSAP basics, this video will inspire you to dive into SVG animations!
Topic Review
- Creating and animating an <ellipse>
- Using custom fonts
- Breaking apart text
- Grouping
- Animating transforms
- Setting up our SVG and GSAP code in CodePen
My goal in building this lesson is to inspire you make something simple like this on your own. It doesn't have to take hours. You should be able to have something working in 30 minutes or so.
You can code along with this starter file.
My Finished Demo
Go Deeper with GreenSock
If you would love to have new web animation lessons and challenges sent to your inbox each week AND also instantly unlock over 180 lessons for all skill levels check out my Creative Coding Club course bundle.
I absolutely guarantee you're going to love it.
Check out my new logo animation!
This was 100% designed in Boxy SVG and animated with GSAP on CodePen.
If you get some joy scrubbing through this animation and say "I want to make animations like this", then my course bundle is for you!