GSAP set() — Initializing Element States for Animation

DodaTech Updated 2026-06-28 3 min read

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

GSAP set() instantly applies property values to elements without animating, making it ideal for initializing states before tweens or resetting elements.

What You'll Learn

By the end of this guide, you will use set() for initial positioning, set CSS properties instantly, combine set() with from() for entrance animations, set SVG attributes, and reset elements to defaults.

Basic set()

gsap.set('.box', {
    x: 200,
    rotation: 45,
    opacity: 0.5,
    backgroundColor: '#ff6b35'
});

Set SVG Attributes

gsap.set('circle', {
    attr: {
        cx: 100,
        cy: 100,
        r: 50
    },
    fill: '#4ecdc4'
});

Set for Entrance Animation

// Set initial state, then animate in
gsap.set('.card', {
    opacity: 0,
    y: 50,
    scale: 0.8
});

// Animate from set state
gsap.to('.card', {
    opacity: 1,
    y: 0,
    scale: 1,
    duration: 0.5,
    stagger: 0.1
});

Reset with set()

function resetElement(el) {
    gsap.set(el, {
        x: 0,
        y: 0,
        rotation: 0,
        scale: 1,
        opacity: 1,
        clearProps: 'all'
    });
}

Common Mistakes

1. Using set() on Transform Already Animated

set() overwrites current transforms. Call gsap.set after animation completes or use clearProps.

2. Not Using attr for SVG

CSS properties on SVG elements may not work. Use attr: {} for SVG-specific attributes like cx, cy, r.

3. Forgetting set() Is Instant

set() has no duration. It applies values immediately in the same frame.

4. Setting Display None

gsap.set(el, { display: 'none' }) works instantly but may interfere with layout. Use visibility or opacity for animations.

5. Not Using clearProps for Reset

To reset all GSAP-applied properties, use clearProps: 'all' in set().

Practice Questions

Q1: What is the difference between set() and to()? A: set() applies values instantly. to() animates over time.

Q2: How do you set SVG circle radius? A: Use attr: { r: 50 } inside the set() vars object.

Q3: How do you reset all GSAP properties? A: Use clearProps: 'all' in a set() or to() call.

Q4: Can set() affect multiple elements? A: Yes. Pass a selector string or array of elements.

Q5: What properties cannot be set with set()? A: CSS variables and pseudo-element states like ::before are not directly settable.

Challenge: Create a deck of cards that fan out on hover using set() for initial position and to() for the hover effect.

FAQ

Does set() trigger layout?

Yes, instantly. Use set() outside of animation frames to avoid layout thrashing.

Can I use set() in a timeline?

Yes. timeline.set() works the same as gsap.set() but is sequenced in the timeline.

Is set() the same as jQuery .css()?

Not exactly. set() applies GSAP-friendly property transformations and works with transforms.

How do I set transformOrigin with set()?

Use transformOrigin: 'center center' directly in the vars object.

Can I set custom CSS properties?

Yes. GSAP recognizes most CSS properties. For custom properties, use CSS.setProperty.

Try It Yourself

Use set() to initialize element state before animation.

<!DOCTYPE html>
<html>
<head>
    <title>GSAP Set Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/gsap.min.js"></script>
    <style>
        .card { width: 100px; height: 140px; background: #4ecdc4; border-radius: 8px; margin: 10px; display: inline-block; position: relative; }
        .card:nth-child(2) { background: #ff6b35; }
        .card:nth-child(3) { background: #2a9d8f; }
    </style>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>set() Demo</h2>
<button onclick="resetCards()">Reset</button>
<button onclick="animateIn()">Animate In</button>
<div id="container">
    <div class="card" id="card1"></div>
    <div class="card" id="card2"></div>
    <div class="card" id="card3"></div>
</div>
<script>
// Initialize cards off-screen with set()
gsap.set('.card', {
    x: -200,
    opacity: 0,
    rotation: -15,
    scale: 0.5
});

function animateIn() {
    gsap.to('.card', {
        x: 0,
        opacity: 1,
        rotation: 0,
        scale: 1,
        duration: 0.6,
        stagger: 0.15,
        ease: 'back.out(1.7)'
    });
}

function resetCards() {
    gsap.set('.card', {
        x: -200,
        opacity: 0,
        rotation: -15,
        scale: 0.5
    });
}
</script>
</body>
</html>

What's Next

Animate groups with stagger.

Stagger — Stagger animations. Keyframes — Keyframe animations.

← Previous GSAP from() and to() — Tween Creation Methods Next → GSAP Stagger — Sequencing Animations Across Elements

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Gsap