Chapter 72: Webflow animation guide

Core Idea

Supercharge your Webflow animations with Motion. Go beyond native capabilities to animate gradients, create hardware-accelerated scroll effects, and build complex timelines. Achieve better Lighthouse scores than GSAP and superior performance with this free, lightweight animation library.

Key Concepts

• Install: First
• Custom scripts: By importing scripts directly from this URL
• Next: Now that you have Motion running in your Webflow project
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

<script type="module">
  import { animate, scroll } from "https://cdn.jsdelivr.net/npm/motion@11.13.5/+esm"

  animate("header", { opacity: 1 })
</script>

• What it demonstrates: Core usage pattern for Webflow animation guide.

Key Takeaways

1. Animate previously unanimatable values (like gradients and masks).
2. Hardware accelerated scroll animations.
3. Complex timeline sequences.
4. Three.js.

Connects To

• Scroll animations in JavaScript with scroll(): related Motion doc page.
• Migrate from GSAP to Motion: related Motion doc page.
• animate(): related Motion doc page.
• Get started with Motion: related Motion doc page.
• CSS spring animations for React, Astro and Vue: related Motion doc page.