← Volver al catálogo
WebReferenciaIntermedioEn el pase

GSAP con Vue, Nuxt, Svelte y otros frameworks

Guia oficial de patrones GSAP para frameworks no-React (Vue 3, Nuxt 4, Svelte/SvelteKit): ciclo de vida, scoping de selectores con gsap.context y limpieza al desmontar componentes. Cubre carga diferida de plugins, composables reutilizables y cleanup con ctx.revert().

Comprobando acceso…

Incluida en el Pase · para Vue, Nuxt, Svelte

// resultado_de_ejemplo
Abrir en una pestaña nueva ↗

// qué_hace

Proporciona patrones de referencia para integrar animaciones GSAP correctamente en Vue 3, Nuxt 4, Svelte y SvelteKit con lifecycle, scoping y cleanup.

// cómo_lo_hace

Usa gsap.context(scope) en onMounted/onMount para aislar selectores al componente y llama a ctx.revert() en el hook de desmontaje para liberar animaciones y ScrollTriggers.

// ejemplo_de_uso

Úsala cuando integres animaciones GSAP en Vue, Nuxt o Svelte y las animaciones se rompan al navegar entre rutas o desmontar componentes. Ej.: corregir un ScrollTrigger que seguía activo después de salir de un componente en Nuxt 4 y consumía memoria innecesariamente.

// plataformas

VueNuxtSvelteSvelteKit
Categoría
Web
Tipo
Referencia
Nivel
Intermedio
Licencia
Apache-2.0
Seguridad
seguro · riesgo bajo
Versión
1.0.0

// opiniones_de_la_comunidad

Opiniones

Cargando opiniones…