Ok, I know the title is a mouthful, but this lesson is packed with some great tips for you.

Two main lesson objectives:

  1. Make a circle big enough to fill the viewport without using any JavaScript.
  2. Create text that starts offscreen to the left and moves completely offscreen to the right.


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.


Finished Demo (scroll)

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. 


Additional Resources


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.



Master GreenSock Animation

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!

Join Today


Creative Coding is FUN

Let me show you how to find inspiration anywhere.


Always look in the world around you for something you can replicate with code. 

Working through an animation like this on your own will build upon the skills I love to teach you. 



BONUNS DEMO

Stay tuned to your Creative Coding Club emails to learn how this stroke animation was made!