Integrate Motion with Webflow
Webflow already comes with some animation capabilities, but it can be that you want to go that little bit further by introducing custom code:
Animate previously unanimatable values (like gradients and masks)
Hardware accelerated scroll animations
Complex timeline sequences
Three.js
It's straightforward to integrate Motion into your Webflow project (and if you're migrating from GSAP, you can even shave a couple points off your Lighthouse Performance score).
In this guide, we'll walk through how you can add Motion to your project, and give an overview of how to optionally generate custom scripts for even better performance.
Install
First, open the Pages dialog in your project and click "Edit page settings" on the page you want to add Motion to.
Scroll down until you find the "Before <body /> tag" dialog. In here, we can add our Motion code.
