Responsive Animation Free Lesson
Learn how to use 142vmax-sized circles to fill the browser window at any aspect ratio and create a responsive "edge-to-edge" text animation.
Ok, I know the title is a mouthful, but this lesson is packed with some great tips for you.
I'm going to walk you through a trick Blake Bowen from GreenSock taught me to use 142vmax as the size of our circle and do my best to explain why it works.
As always, watch the whole video so you can soak in all the juicy nuggets of animation goodness!
Use this start file if you want to code along.
Open the demo in a new window to test it's awesome responsiveness!
So there you go! You can now make circles guaranteed to fill the whole browser window!
Remember for centered circles use 142vmax and for ones positioned anywhere use 283vmax as width and height.
If you look at the code used in this week's lesson, you'll notice it's really just basic Timeline and ScrollTrigger code.
However, it takes a lot of time to learn what CSS to use and how to glue it all together.
That's where my training comes in.
Your Creative Coding Club membership includes ALL these courses: GSAP Express, Beyond the Basics, SVG Animation with GreenSock, ScrollTrigger Express, and B-sides, Bonuses, and Oddities.
Unlock all my premium GreenSock training and get new lessons weekly.
The Creative Coding Club offers the most comprehensive GreenSock training available.
From basics, to scroll-driven animations, advanced tips and tricks, and SVG animation, you'll learn it all!