How can I visualize animations using GSAP timelines?

How can I visualize animations using GSAP timelines?

You can visualize animations in GSAP by creating a timeline that sequences your animations. Would you like a code example?

Yes, please provide a simple code example.

Sure! Here's a basic example:

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

This code moves a box to the right, then down, and finally rotates it.

How can I add more animations to the timeline?

You can add more animations by chaining additional .to() or .from() methods to the timeline. For example:

tl.to('.box', {duration: 1, scale: 1.5})
  .to('.box', {duration: 1, opacity: 0});