How can I create advanced animations using GSAP timelines?

How can I create advanced animations using GSAP timelines?

To create advanced animations with GSAP timelines, you can use the TimelineLite or TimelineMax classes to sequence animations.

Can you show me an example of a timeline with multiple animations?

Sure! Here's a simple example:

let tl = gsap.timeline();
tl.to('.box', {duration: 1, x: 100})
  .to('.box', {duration: 1, rotation: 360})
  .to('.box', {duration: 1, y: 100});

What if I want to add a delay between animations?

You can add a delay by using the delay property in your animation. For example:

tl.to('.box', {duration: 1, x: 100, delay: 0.5});

How do I reverse the timeline?

You can reverse the timeline by calling tl.reverse(); This will play the animations in reverse order.