GSAP Timelines

GSAP Timelines allow you to sequence and synchronize multiple animations with precision, creating complex and dynamic motion effects in your web projects. With timelines, you can control the timing, duration, and ordering of animations, providing flexibility and organization to your animation workflow. Let's explore how to use GSAP Timelines:

---

1. Creating a Timeline

You can create a new GSAP Timeline using the TimelineMax or TimelineLite class constructor. Here's an example:

var timeline = new TimelineMax();

This code creates a new TimelineMax instance named timeline.

---

2. Adding Animations to a Timeline

Once you have a timeline, you can add animations to it using methods like to() and from(). Here's an example:

timeline.to(".box", 1, { x: 100 })
        .to(".box", 0.5, { y: 200, scale: 1.5 });

This code adds two animations to the timeline: one that moves an element with the class "box" 100 pixels to the right, and another that moves it 200 pixels down and scales it to 1.5 times its original size.

---

3. Controlling Timeline Playback

You can control the playback of a timeline using methods like play(), pause(), reverse(), and seek(). Here's an example:

timeline.play();

This code plays the timeline, causing all animations within it to start executing.

---

4. Nesting Timelines

You can nest timelines within each other to create hierarchical animation structures. This allows for greater organization and control over complex animation sequences. Here's an example:

var nestedTimeline = new TimelineMax();
timeline.add(nestedTimeline);

This code creates a new TimelineMax instance named nestedTimeline and adds it to the main timeline.

---

5. Staggering Animations

GSAP provides methods like staggerTo() and staggerFrom() to create staggered animations within a timeline. This allows you to animate multiple elements with a delay between each animation. Here's an example:

timeline.staggerTo(".item", 0.5, { y: 100 }, 0.2);

This code animates elements with the class "item" to move 100 pixels down, staggering each animation by 0.2 seconds.

---

Conclusion

GSAP Timelines provide a powerful and intuitive way to orchestrate complex animations in your web projects. By creating timelines, adding animations, controlling playback, nesting timelines, and staggering animations, you can create dynamic and engaging motion effects with ease.