Chapter 75: Migrate from GSAP to Motion

Core Idea

Migrate from GSAP to Motion for hardware-accelerated animations, smaller bundle sizes, and an open MIT license. Learn to convert basic animations, timelines, scroll-triggered/linked animations, and React animations to Motion.

Key Concepts

• Benefits: Motion is built on modern browser APIs like Web Animations API (WAAPI) and Scroll Timeline
• Drawbacks: A robust feature comparison with GSAP can be found in our feature comparison guide
• Migrate: For this guide
• Basic animations: The "Hello world' of JavaScript animations
• Animation controls: Both GSAP and Motion animations return animation controls.
• Timeline sequencing: Both Motion and GSAP offer timeline sequencing.
• Scroll-triggered animations: Scroll-triggered animations are normal time-based animations that trigger when an element
• Scroll-pinning: GSAP has an option called pin.
• Scroll-linked animations: By passing scrub: true to scrollTrigger

Code Examples

gsap.to("#animate-anything-css", {
  duration: 10,
  ease: "none",
  repeat: -1,
  rotation: 360,
})

• What it demonstrates: Core usage pattern for Migrate from GSAP to Motion.

Key Takeaways

1. Migrate from GSAP to Motion supports Benefits.
2. Migrate from GSAP to Motion supports Drawbacks.
3. Migrate from GSAP to Motion supports Migrate.

Connects To

• Scroll animations in JavaScript with scroll(): related Motion doc page.
• animate(): related Motion doc page.
• GSAP vs Motion: A detailed comparison: related Motion doc page.
• Layout Animation: related Motion doc page.
• Tween: related Motion doc page.