gsap-frameworks

GSAP animations in Vue require proper lifecycle management to avoid memory leaks. You must initialize animations within the onMounted lifecycle hook and use GSAP context for scoping selectors, ensuring proper cleanup when the component unmounts to prevent orphaned animation instances.

Scoping GSAP selectors in Svelte involves binding the animation context to the component root element. This prevents selector conflicts with other elements by isolating GSAP queries to the specific component's DOM tree, ensuring animations only target intended elements.

GSAP is fully compatible with Vue and Svelte for component-based animations. It handles complex animation sequences while respecting component lifecycle events, ensuring DOM elements are available before animation initialization and cleaned up properly on component destruction.

Using GSAP with Vue and Svelte requires installing the core GSAP library alongside framework-specific plugins. These dependencies are essential for handling non-React framework lifecycle events, scoping selectors, and managing animation cleanup during component unmounting.

GSAP animations break on Svelte component unmount due to missing cleanup logic. Without proper lifecycle management to revert animated properties and kill active tweens, the animation context persists, causing errors when the underlying DOM elements are destroyed.

The gsap-frameworks skill targets non-React frameworks like Vue and Svelte. It specifically provides GSAP animation capabilities and lifecycle management for component-based architectures outside the React ecosystem, handling scoping and cleanup for those environments.