gsap-frameworks Checked

<template>

<div ref="container">

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

<div class="item">Item</div>

</div>

</template>

## Svelte

Use **onMount** to run GSAP after the DOM is ready. Use the **returned cleanup function** from onMount (or track the context and clean up in a reactive block / component destroy) to revert. Svelte 5 uses a different lifecycle; the same principle applies: create in “mounted” and revert in “destroyed.”

<script>

import { onMount } from "svelte";

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

let container;

onMount(() => {

if (!container) return;

const ctx = gsap.context(() => {

gsap.to(".box", { x: 100 });

gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });

}, container);

return () => ctx.revert();

});

</script>

<div bind:this={container}>

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

<div class="item">Item</div>

</div>

- ✅ **bind:this={container}** — get a reference to the root element so you can pass it to **gsap.context(scope)**.
- ✅ **return () => ctx.revert()** — Svelte’s onMount can return a cleanup function; call **ctx.revert()** there so cleanup runs when the component is destroyed.

## Scoping Selectors

Do not use global selectors that can match elements outside the current component. Always pass the **scope** (container element or ref) as the second argument to **gsap.context(callback, scope)** so that any selector run inside the callback is limited to that subtree.

- ✅ **gsap.context(() => { gsap.to(".box", ...) }, containerRef)** — `.box` is only searched inside `containerRef`.
- ❌ Running **gsap.to(".box", ...)** without a context scope in a component can affect other instances or the rest of the page.

## ScrollTrigger Cleanup

ScrollTrigger instances are created when you use the `scrollTrigger` config on a tween/timeline or **ScrollTrigger.create()**. They are **included** in **gsap.context()** and reverted when you call **ctx.revert()**. So:

- Create ScrollTriggers inside the same **gsap.context()** callback you use for tweens.
- Call **ScrollTrigger.refresh()** after layout changes (e.g. after data loads) that affect trigger positions; in Vue/Svelte that often means after the DOM updates (e.g. nextTick in Vue, tick in Svelte, or after async content load).

## When to Create vs Kill

| Lifecycle        | Action |
|-----------------|--------|
| **Mounted**      | Create tweens and ScrollTriggers inside **gsap.context(scope)**. |
| **Unmount / Destroy** | Call **ctx.revert()** so all animations and ScrollTriggers in that context are killed and inline styles reverted. |

Do not create GSAP animations in the component’s setup or in a synchronous top-level script that runs before the root element exists. Wait for **onMounted** / **onMount** (or equivalent) so the container ref is in the DOM.

## Do Not

- ❌ Create tweens or ScrollTriggers before the component is mounted (e.g. in setup without onMounted); the DOM nodes may not exist yet.
- ❌ Use selector strings without a **scope** (pass the container to gsap.context() as the second argument) so selectors don’t match elements outside the component.
- ❌ Skip cleanup; always call **ctx.revert()** in onUnmounted / onMount’s return so animations and ScrollTriggers are killed when the component is destroyed.
- ❌ Register plugins inside a component body that runs every render (it doesn't hurt anything, it's just wasteful); register once at app level.

### Learn More

- **gsap-react** skill for React-specific patterns (useGSAP, contextSafe).