How can I use nested timelines in GSAP?

How can I use nested timelines in GSAP?

Nested timelines in GSAP allow you to create complex animations by organizing them into separate timelines. You can create a main timeline and then add child timelines to it, which can be controlled independently.

Can you give me an example of how to implement this?

Sure! Here's a simple example:

let mainTimeline = gsap.timeline();
let childTimeline = gsap.timeline();

childTimeline.to('.box', { x: 100, duration: 1 });

mainTimeline.add(childTimeline);
mainTimeline.to('.circle', { y: 100, duration: 1 });

This will move the box first and then the circle.

What are the benefits of using nested timelines?

Using nested timelines helps in organizing your animations better, making it easier to manage complex sequences and control playback.

Can I control the playback of nested timelines separately?

Yes, you can control each nested timeline independently using methods like play(), pause(), or reverse() on the child timelines.