Adding Motion Components to Webflow

Option 1: Page-Specific Installation

Go with this option if you only plan to use the motion component on a single page.

  1. In the Designer, open the Pages panel and click the Gear Icon for your specific page.
  2. (CSS): Paste styles into the Inside <head> tag field.‍
  3. (JS): Paste scripts into the Before </body> tag field.
  4. Click Save and Publish.

Option 2: Global Installation (All Pages)

Go with this if you plan to use the motion component on multiple pages.

  1. Go to Project Settings > Custom Code.
  2. (CSS): Paste your <link> or <style> tags into the Head Code section.
  3. (JS): Paste your <script> tags into the Footer Code section.
  4. Click Save Changes and Publish your site.

‍

‍

⚡ Quick Reminders

  • Check Live: Custom code only runs on the published site, not inside the Designer.
  • Order Matters: Always place CSS in the Head and JS in the Footer for the best performance.

‍

‍