Apply GSAP animations in Vue and Svelte with lifecycle cleanup.
npx skills add https://github.com/nnecec/nnecec.studio --skill gsap-frameworks
Please help me install this Agent Skill. Skill: gsap-frameworks Source: https://github.com/nnecec/nnecec.studio/tree/main/.agents/skills/gsap-frameworks Command: npx skills add https://github.com/nnecec/nnecec.studio --skill gsap-frameworks
This Skill helps developers apply GSAP animations across component-based frameworks while ensuring correct lifecycle handling and cleanup, preventing leaks and DOM-insertion issues.
Initialize GSAP animations inside Vue or Svelte lifecycle hooks and revert on unmount to ensure clean teardown.
High-intent search queries and answers about installing and using this skill.
To clean up GSAP animations on Vue component unmount, initialize them within lifecycle hooks like onMounted and use gsap.context to scope selectors to the component root, then call revert on unmount to prevent memory leaks.
The best way to scope GSAP animations in Svelte is by using gsap.context inside the onMount lifecycle hook, which restricts selector text to the component root and ensures proper cleanup when the component is destroyed.
Yes, this GSAP lifecycle guidance applies to Nuxt and SvelteKit environments, providing framework-specific patterns for scoping animations to component roots and ensuring proper teardown during server-side rendering and hydration.
GSAP animations target wrong DOM elements in component frameworks because global selectors match across the entire document, so you must use gsap.context to scope selector text specifically to the current component's root element.
For React GSAP animations, you should use the dedicated gsap-react Skill instead of this approach, which is specifically designed for Vue, Svelte, Nuxt, and SvelteKit component lifecycle management and cleanup.
Yes, you need gsap core installed to use these component animation patterns, and possibly additional GSAP plugins depending on the specific animation requirements, to ensure proper lifecycle management and scoping.
fanguyunManage GSAP animations in Vue and Svelte with lifecycle cleanup.
DanielV-94Sequence GSAP tweens with timelines, position parameters, and labels.
het8802Integrate GSAP animations in React and Next.js using the useGSAP() hook.
maurodf0Integrate Cupertino native UI components into React, Vue, or vanilla JS apps with TypeScript support.
