DOCS

Animations for Webflow

Voom.sh Animations integrates seamlessly with Webflow's no-code ecosystem, allowing you to add stunning animations to your site without writing complex JavaScript. This guide will walk you through the installation process and show you how to add animations to any element in your Webflow project.

Quick Installation Guide

Adding the Script to Your Webflow Project
  1. In your Webflow project, navigate to Project Settings (⚙️ icon in the left sidebar)
  2. Select the Custom Code tab
  3. Scroll down to the Footer Code section
  4. Paste the following code: <script src="https://cdn.jsdelivr.net/gh/ktonik/voom@v1.0.4/dist/voom-demo.min.js"></script>
  1. Click Save Changes

Using Voom.sh in Webflow Designer

Webflow makes it particularly easy to implement Voom.sh Animations using the custom attribute method, which is perfect for Webflow's visual designer.

Method: Using Custom Attributes (Recommended for Webflow)
  1. Select any element in the Webflow Designer
  2. Open the Settings Panel (right sidebar)
  3. Scroll down and click + Add Custom Attribute
  4. Set the Name as voomsh
  5. Set the Value to your desired animation (e.g., hdr-1, par-1, etc.)
  6. Publish to staging  to see the animations in action

Need help?

Contact our support team at support@voom.sh