How can I create staggered animations using GSAP?

How can I create staggered animations using GSAP?

You can create staggered animations in GSAP by using the stagger property in your animation timeline. This allows you to delay the start of each animation in a sequence.

Can you show me a code example?

Sure! Here's a simple example:

gsap.from('.box', { duration: 1, y: 100, stagger: 0.2 });

This will animate each .box element from 100 pixels down to its original position, with a 0.2-second delay between each animation.

What if I want to stagger both the start and the end of the animations?

You can achieve that by using the stagger property in both the from and to methods. For example:

gsap.fromTo('.box', { y: 100 }, { y: 0, duration: 1, stagger: { amount: 0.5 } });

Are there any performance considerations I should keep in mind?

Yes, when using staggered animations, especially with many elements, it's important to optimize your animations. Use will-change CSS property and avoid animating properties that trigger layout changes.