Skill LibraryPrompt Skill1 DesignsTop Views

GSAP Frameworks

Official GSAP skill for Vue, Svelte, and other non-React frameworks, covering lifecycle, selector scoping, and cleanup on unmount.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines8

Reusable instruction lines for generation.

Author@Interface Lab

Animation

Skill Directive

Description

Official GSAP skill for Vue, Svelte, and other non-React frameworks, covering lifecycle, selector scoping, and cleanup on unmount.

TagsAnimation

Skill Prompt

- Use for GSAP animation in Vue, Nuxt, Svelte, SvelteKit, or other non-React frameworks; use gsap-react for React projects.
- Create actual animations only in client lifecycle hooks: onMounted for Vue and onMount for Svelte; do not access DOM or execute gsap during SSR/server render.
- Scope selectors through a component root element ref/binding so selectors like '.box' do not match nodes outside the component.
- Always clean up on unmount: use onUnmounted in Vue or return cleanup from Svelte onMount; call ctx.revert(), timeline.kill(), tween.kill(), or kill ScrollTriggers.
- When dynamic lists or conditional rendering change targets, resync animation targets and clean old instances; call ScrollTrigger.refresh() when layout changes affect scroll triggers.
- In Nuxt/SvelteKit and other SSR frameworks, ensure GSAP code runs only in the browser, using dynamic import or client-only components when needed.
- Framework integration still follows GSAP core performance rules: prefer transform/opacity, batch with stagger, and respect prefers-reduced-motion.
- Source: greensock/gsap-skills official MIT skill material, fixed to commit aed9cfd3277740755f6bfc1155c7aa645403b760.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

GSAP Frameworks

More pages using GSAP Frameworks