Chapter 410: Webflow

Core Idea

Build visually with the GSAP powered Webflow iteractions. Available for free to all Webflow customers.

Key Concepts

• A horizontal timeline with precise, granular controls
• Visual feedback so you can scrub, preview, and perfect
• Built: in support for SplitText, ScrollTrigger, staggers, and more
• The power to reuse animations across your site for faster workflows
• I'd like to build visually
• I'd like to write code

Code Examples

<script>
   addEventListener("DOMContentLoaded", (e) => {

     gsap.to('.my-element', {
      rotation: 360,
      duration: 2,
      ease: 'bounce.out'
     })

   });
   </script>

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

Key Takeaways

1. A horizontal timeline with precise, granular controls
2. Visual feedback so you can scrub, preview, and perfect
3. Built — in support for SplitText, ScrollTrigger, staggers, and more
4. The power to reuse animations across your site for faster workflows
5. I'd like to build visually