Chapter 393: JS Frameworks

Core Idea

GSAP is a framework-agnostic animation library, that means that you can write the same GSAP code in React, Vue, Angular or whichever framework you chose, the core principles won't change.

Key Concepts

• React
• Next
• Vue
• Nuxt 3

Code Examples

let tween;

// create your animation when the component mounts
onMounted(() => {
	tween = gsap.to(el, { rotation: 360, repeat: -1 });
});

onUnmounted(() => {
	tween.revert(); // <- revert your animation when it unmounts
});

• What it demonstrates: typical usage of JS Frameworks in a GSAP animation.

Key Takeaways

1. React
2. Next
3. Vue
4. Nuxt 3

Connects To

• revert(): see ch119 — revert
• gsap.context(): see ch009 — gsap.context()