gsap-frameworks
GSAP with Vue, Svelte, and Other Frameworks
When to Use This Skill
Apply when writing or reviewing GSAP code in Vue (or Nuxt), Svelte (or SvelteKit), or other component frameworks that use a lifecycle (mounted/unmounted). For React specifically, use gsap-react (useGSAP hook, gsap.context()).
Related skills: For tweens and timelines use gsap-core and gsap-timeline; for scroll-based animation use gsap-scrolltrigger; for React use gsap-react.
Principles (All Frameworks)
- Create tweens and ScrollTriggers after the component’s DOM is available (e.g. onMounted, onMount).
- Kill or revert them in the unmount (or equivalent) cleanup so nothing runs on detached nodes and there are no leaks.
- Scope selectors to the component root so
.boxand similar only match elements inside that component, not the rest of the page.
Vue 3 (Composition API)
Use onMounted to run GSAP after the component is in the DOM. Use onUnmounted to clean up.
More from calesthio/openmontage
video-edit
|
34video-download
|
31text-to-speech
|
31ffmpeg
Video and audio processing with FFmpeg. Use for format conversion, resizing, compression, audio extraction, and preparing assets for Remotion. Triggers include converting GIF to MP4, resizing video, extracting audio, compressing files, or any media transformation task.
29beautiful-mermaid
Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.
29acestep
AI music generation with ACE-Step 1.5 — background music, vocal tracks, covers, stem extraction for video production. Use when generating music, soundtracks, jingles, or working with audio stems. Triggers include background music, soundtrack, jingle, music generation, stem extraction, cover, style transfer, or musical composition tasks.
29