Mega #GSAP Demo Thread I've finished my Circles Study and now I will share them all with you here. CodePen.IO demos for each AND little GSAP tips along the way! 👇 #GSAP #creativeCoding #JavaScript #CSS

Pulsing Pretty much beginner territory here with a simple stagger. The circles all start at size 142% width and height which guarantees they will cover their container. They then animate up from a scale:0. By using an ease in the stagger object we get a non-linear distribution of the start times. 🔥Each live demo can be restarted by clicking on it

Trails Very similar to the first example but there are 2 staggers: 1 for enter and 1 for leave. Again an ease is used in the stagger object to offset the start times. I suggest changing to a different ease to see how it works

Triad Wasn't really sure what to name this one and I wasn't sure what it would do when I started. It kind of just happened. This one has 3 sections: circles grow, shift position, scale down. Not really brain surgery but I had to give each circle a specific transform origin to get them all to shrink towards the center are the end.

Spin Pulse Although there is a bit of a 3D illusion the circles only rotate and scale. To create the seamless loop I create one timeline that staggers the rotating and scaling and then use another timeline with a tweenFromTo(2,5) to skip over the opening and ending staggers. You can comment out lines 25 and 34 to see the staggering that I'm hiding.

Collide Back to basics with a simple timeline. When the 2 circles collide I instantly hide them using a set() and then start growing the third circle until it covers the demo and fades out.

Drop Stagger Again 2 staggers do all the work. Worthy of note are the back eases. You'll notice the overshoot of the back ease on the way in is less than on the way out. You can easily adjust the strength of the overshoot by changing the numbers ie: back(2) or back(5) For a little extra 💪 flex I'm using from:"end" to have them leave from right to left. Last one in, first one out... just to be fair 😀

Searching Animation-wise it's just 3 circles moving back forth, but I just love the illusion of depth that you get from the semi-transparent circles stacking on top of each other. All of these demos use circles that are sized based on a percentage-width of their container. This allows them to scale nicely. By using xPercent and yPercent values for x and y placement it also allows for their positions to adjust when their container resizes. Notice you can change the default duration and ease for all the animations in the timeline defaults object. This makes for quick prototyping. Be sure to resize all the demos to see how nicely responsive they are.

Whip Just 3 circles rotating 180 degrees with offset origins. Notice how the strength of the back() eases gets progressively higher. This is what causes the "whip" effect. By using the relative syntax of "+=180" and repeatRefresh:true on the timeline I get away with just one set of tweens. Each time the timeline repeats the circles animate 180 degrees more than their current rotation.

Carousel Here I achieve an infinite loop of 3 items with a little bit of timing trickery. The circle on the right never animates away. It instantly jumps off-stage to the left and animates back in where you only see a sliver of it. With the left circle growing and the middle circle shrinking and moving right you really don't notice this sleight of hand.

If you made it this far and learned something of value please consider re-posting / liking this thread or ANY of your favorite demos. It means a lot. If none of this makes any sense and you want to learn more I have a free GSAP beginner's course that has helped thousands of front-end developers learn how to create animations with code. I also have affordable paid options if you want to really learn all of what GSAP can do. Learn more about Free and Premium GSAP Training