gsap-frameworks

Name: gsap-frameworks
Availability: InStock
Author: James

Coordinate GSAP animations in Vue, Svelte, and lifecycle-based frameworks.

Updated Oct 2, 2024

Search Tags:#frameworks #vue #cleanup #svelte #lifecycle #gsap

Ready to run

npx skills add https://github.com/James-Gamboa/portfolio-james --skill gsap-frameworks-james-gamboa

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-frameworks
Source: https://github.com/James-Gamboa/portfolio-james/tree/main/.agents/skills/gsap-frameworks
Command: npx skills add https://github.com/James-Gamboa/portfolio-james --skill gsap-frameworks-james-gamboa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides how to integrate GSAP animations across Vue, Nuxt, Svelte, SvelteKit, and other framework ecosystems that use a component lifecycle, ensuring safe, scoped, and clean animations.

Core Features & Use Cases

Scoped animations using gsap.context to confine effects to the component root.
Lifecycle-aware patterns for onMounted/onMount and onUnmounted to start and clean up animations.
Guidance for framework-specific setups (Vue 3 composition API, Nuxt 4, Svelte) and ScrollTrigger integration.
Recommended plugin loading strategies and reusable composables for large apps.

Quick Start

Create GSAP animations inside a framework's mounted hook and use gsap.context to scope them to the component, then call revert on unmount.

Frequently Asked Questions about gsap-frameworks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I clean up GSAP animations on component unmount in Vue?▼

Clean up GSAP animations in Vue by initializing them inside the onMounted hook using gsap.context for scoping, then calling revert on the context within the onUnmounted lifecycle hook to safely destroy instances and prevent memory leaks.

What is the best way to scope GSAP selectors to a specific Svelte component?▼

The best way to scope GSAP animations in Svelte is using gsap.context, which confines selector text to the component's root element, preventing accidental global DOM matches and ensuring animations only affect the intended local elements.

Does GSAP ScrollTrigger work with Nuxt lifecycle hooks?▼

Yes, GSAP ScrollTrigger integrates with Nuxt by applying lifecycle-aware patterns, initializing triggers within the mounted hook, scoping them via gsap.context, and calling revert on unmount to ensure reliable cleanup and prevent scroll tracking errors.

Why does my GSAP animation target the wrong elements in a component lifecycle framework?▼

GSAP animations target wrong elements when global selectors match unintended DOM nodes; resolve this by wrapping animations in gsap.context within the component's mounted hook to restrict selector matching to the local component root.

Can I use reusable composables to manage GSAP plugin loading in large applications?▼

Yes, you can use reusable composables to manage GSAP plugin loading and animation setup across large applications, providing a standardized way to handle framework-specific context scoping and lifecycle cleanup for complex animation workflows.