gsap.to()

Animates an element from its current state to a new state.

Syntax

gsap.to(target, {
  property: value,
  duration: time
});

Example

<div class="box"></div>

<script>
gsap.to(".box", {
  x: 300,
  duration: 2
});
</script>

What Happens?

• Box starts from its current position.
• Moves 300px right.
• Takes 2 seconds.

gsap.from()

Animates an element from a given state to its current state.

Syntax

gsap.from(target, {
  property: value,
  duration: time
});

Example

gsap.from(".box", {
  x: -300,
  opacity: 0,
  duration: 2
});

What Happens?

• Starts 300px left.
• Invisible initially.
• Moves to original position.
• Opacity becomes 1.

Use Cases

• Page Load Animations
• Hero Sections
• Scroll Animations

gsap.fromTo()

Defines both starting and ending values.

Syntax

gsap.fromTo(
  target,
  { startProperties },
  { endProperties }
);

Example

gsap.fromTo(
  ".box",
  {
    x: 0
  },
  {
    x: 500,
    duration: 2
  }
);

4. gsap.set()

Changes properties instantly.

Syntax

gsap.set(target, {
  property: value
});

Example

gsap.set(".box", {
  x: 200,
  opacity: 0.5
});

What Happens?

Immediately:

• Moves box to x=200
• Opacity = 0.5
• No animation

Use Case

Set initial state before animation.

gsap.set(".box", { opacity: 0 });

gsap.to(".box", {
  opacity: 1,
  duration: 2
});