loading...

using gsap stagger function to make animations more visually interesting

rahuldkjain profile image Rahul Jain Originally published at rahuldkjain.github.io ・2 min read

#10daysofanimation (7 Part Series)

1) 🚀List of awesome inspirations to get started with animations 2) Getting familiar with gsap.to and gsap.fromTo functions 3 ... 5 3) using gsap stagger function to make animations more visually interesting 4) let's animate minion using gsap 5) typing text animation in terminal using gsap 6) animated banner for repository README 7) windmill animation in 10KB

gsap stagger proves out to be an awesome feature when the animation involves multiple elements having same properties or same class to be more precise.

Tweaking a few options can make your animations much more visually interesting. You may be surprised by just how easy it is to create advanced effects with a tiny amount of code.

Adding a stagger to a multi-target element basically offsets the starting time of each target's animation.

All elements(with the same class i.e targetElement) recognize a stagger property which can be a number, an object, or a function.

Let's understand it better with the help of a simple example.

Challenge

Rolling balls animation that looks real(i.e following physics laws).

Solution

Create balls in svg and assign class='ball' to all of them. Align them horizontally with equal distance between them. I'll move the first ball horizontally using x: 70 and rotate along z axis using rotateZ: 360 by transforming the origin as transformOrigin: "50% 50%".
As there are 6 balls, I'll set the animation duration to be 3s with stagger delay of 0.5s as stagger: 0.5.

gsap.to('.ball', {
    duration: 3,
    x: 70,
    transformOrigin: "50% 50%",
    rotateZ: 360,
    ease: "back.out(1.7)",
    stagger: 0.5,
    repeat: -1,
});

It will look like this

Looks real ha! I know the animation is basic, but believe me gsap stagger is really powerful.

Other animations that I made are as follows




Happy Animating!

#10daysofanimation (7 Part Series)

1) 🚀List of awesome inspirations to get started with animations 2) Getting familiar with gsap.to and gsap.fromTo functions 3 ... 5 3) using gsap stagger function to make animations more visually interesting 4) let's animate minion using gsap 5) typing text animation in terminal using gsap 6) animated banner for repository README 7) windmill animation in 10KB

Posted on by:

rahuldkjain profile

Rahul Jain

@rahuldkjain

♥️In relationship with front end dev👨‍💻

Discussion

markdown guide
 

To know more about stagger, please check out the official documentation