Sequencing Animations With Timelines

Sequencing animations is a fundamental aspect of creating dynamic and engaging motion effects in web development. GSAP Timelines offer a powerful solution for sequencing animations with precision and flexibility. Let's explore how to use timelines to sequence animations:

1. Creating a Timeline

Start by creating a new GSAP Timeline using the TimelineMax or TimelineLite class constructor:

var timeline = new TimelineMax();

2. Adding Animations

Add animations to the timeline using methods like to() or from(). Each animation will play in sequence according to their order in the timeline:

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

This code adds two animations to the timeline: the first moves an element with the class "box1" 100 pixels to the right, and the second moves an element with the class "box2" 200 pixels down and scales it to 1.5 times its original size. The second animation will start after the first one completes.

3. Sequencing Delayed Animations

You can introduce delays between animations to create a sequence with pauses between each animation. Use the add() method to add delays to the timeline:

timeline.to(".box3", 1, { rotation: 90 })
        .addPause(0.5)
        .to(".box4", 1, { opacity: 0.5 });

This code adds a rotation animation to an element with the class "box3", followed by a pause of 0.5 seconds, and then an opacity animation to an element with the class "box4". The pause creates a delay between the two animations.

4. Controlling Timeline Playback

You can control the playback of the timeline using methods like play(), pause(), reverse(), and seek():

timeline.play();

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

Conclusion

Sequencing animations with GSAP Timelines allows you to create smooth, dynamic, and visually appealing motion effects in your web projects. By adding animations to a timeline, introducing delays between animations, and controlling the timeline playback, you can orchestrate complex animation sequences with ease and precision

Archive