Free Bonus Demos
Join over 2,500 students that are learning new ways to master GSAP each week.
Random Pulsing Tiles with GSAP
Today we are going to look at 3 different approaches to make a grid of tiles appear and disappear randomly.
1: Using a Simple Stagger on All
In the version above a single gsap.to() tween is used on all the boxes.
This tween has a stagger applied with from:"random". This creates a random start time for each of the boxes.
You will also note that it has a repeat and yoyo:true which makes the entire animation play and reverse multiple times.
These features are all covered in my Free course: GSAP 3 Express.
2: Fade and Appear Half the Tiles
This demo uses a function that loops through all the tiles. There is a condition that randomly chooses half the tiles to fade out and half to fade back in.
This technique uses a recursive function which basically means we create a function that repeatedly calls itself when it is done running.
We use a gsap.delayedCall() to call this function again after all the animations play and a little bit of a delay runs out.
Topics like this are covered extensively through my complete GSAP Training.
3: Re-Appear with Random Color
Here we add a fun twist to the previous example. Before a block animates back in we set it's color to a random value stored in the colors array.
My most favorite aspect of creative coding with GSAP is that we can very easily get drastically different effects by just adding an additional line or 2 of code.
Ready to learn more about GSAP?
Great! I'm happy to teach you!
I worked at GreenSock for 7 years creating loads of videos for their website, documentation and official training.
Over the past decade, I've answered thousands of questions in the GreenSock forums and continue to share my knowledge of GSAP wherever I can.
The Creative Coding Club is my way of archiving everything I know about GSAP, ScrollTrigger and SVG Animation so that thousands of students from all over the world can discover the joy of animating with code.
Whether you are new to front-end development or are a seasoned pro, I'm sure you will learn a ton as you go through the 250+ lessons in my course bundle.