GSAP from() and to() — Tween Creation Methods

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about GSAP from() and to(). We cover key concepts, practical examples, and best practices to help you master this topic.

GSAP from() and to() are the core animation methods: to() animates from current state to target values, while from() animates from specified start values to the current state.

What You'll Learn

By the end of this guide, you will create to() tweens for forward animations, use from() for entrance effects, combine fromTo() for full control, use absolute positioning, and apply stagger to multiple targets.

to() Method

gsap.to('.box', {
    x: 300,
    rotation: 360,
    duration: 1,
    ease: 'power2.out'
});

from() Method

gsap.from('.box', {
    x: 300,
    opacity: 0,
    duration: 1,
    ease: 'back.out(1.7)'
});

fromTo() Method

gsap.fromTo('.box',
    { x: 0, opacity: 0, scale: 0.5 },
    { x: 300, opacity: 1, scale: 1, duration: 1 }
);

Stagger

gsap.to('.box', {
    y: 100,
    duration: 0.5,
    stagger: 0.1,
    ease: 'power2.inOut'
});

Common Mistakes

1. Confusing from() and to()

from() animates FROM the given values TO the current state. to() animates FROM current TO given values.

2. Not Specifying Duration

Default duration is 0.5 seconds. Always set explicit duration for predictable timing.

3. Missing Start State in fromTo()

Both start and end objects must be fully specified in fromTo(). Partial objects cause unexpected behavior.

4. CSS Properties with Hyphens

Use camelCase: backgroundColor instead of background-color, borderRadius instead of border-radius.

5. Not Using Relative Values

Use '+=300' for relative x movement or '-=100' to move relative to current position.

Practice Questions

Q1: What is the difference between to() and from()? A: to() animates from current to target. from() animates from target to current (like starting at end).

Q2: How do you animate multiple elements with overlap? A: Use stagger with positive values for sequential or negative for overlapping.

Q3: What does fromTo() give you? A: Full control over both start and end values, useful for complex state transitions.

Q4: How do you set a hex color in GSAP? A: Use 'color: '#ff6b35'' in the tween vars object.

Q5: Can you animate SVG attributes? A: Yes. Use attr: { cx: 100, cy: 200 } for SVG-specific attributes.

Challenge: Create a card flip animation using fromTo with scaleX and transformOrigin for a 3D effect.

FAQ

Can I use to() for CSS transforms?

Yes. GSAP handles translate, scale, rotate, skew via shortcut properties like x, y, scale, rotation.

What is the default ease?

power1.out. Set ease explicitly for custom timing.

Can I chain to() calls?

Yes. Each returns the tween, but use timelines for complex sequencing.

How do I repeat a tween?

Set repeat: -1 for infinite, or repeat: 2 for two additional repeats.

Can I pause a tween?

Yes. Call tween.pause(), tween.play(), tween.reverse().

Try It Yourself

Animate a box with from() and to().

<!DOCTYPE html>
<html>
<head>
    <title>GSAP From To</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/gsap.min.js"></script>
    <style>
        .box { width: 80px; height: 80px; background: #4ecdc4; border-radius: 8px; margin: 10px; display: inline-block; }
    </style>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>from() and to()</h2>
<button onclick="animateTo()">to()</button>
<button onclick="animateFrom()">from()</button>
<button onclick="resetBox()">Reset</button>
<div class="box" id="box"></div>
<script>
gsap.set('#box', { x: 0 });

function animateTo() {
    gsap.to('#box', { x: 400, rotation: 180, duration: 1, ease: 'power2.out' });
}

function animateFrom() {
    gsap.from('#box', { x: 400, opacity: 0, duration: 1, ease: 'back.out(2)' });
}

function resetBox() {
    gsap.set('#box', { x: 0, rotation: 0, opacity: 1 });
}
</script>
</body>
</html>

What's Next

Use set() for initial states.

Set — GSAP set() method. Stagger — Stagger animations.

← Previous GSAP Performance Optimization — Complete Guide to 60fps Animation Next → GSAP set() — Initializing Element States for Animation

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Gsap