How Do I Embed an Animation in Webflow?

by

Are you looking to add some animation effects to your website built with Webflow? Embedding animations can bring life and interactivity to your web pages, making them more engaging and visually appealing. In this tutorial, we will walk you through the process of embedding animations in Webflow, step by step.

Step 1: Choose an Animation Library

To embed an animation in Webflow, you first need to choose an animation library that provides the desired effects. There are several popular animation libraries available, such as:

  • Animate.css: A widely-used CSS animation library that offers a variety of pre-built animation effects.
  • GreenSock (GSAP): A powerful JavaScript-based animation library with extensive features and capabilities.
  • Lottie: An open-source JavaScript library by Airbnb that allows you to embed Adobe After Effects animations into your website.

Note:

If you’re new to animations or want a quick solution, Animate.css is a great choice. For more advanced animations and customizations, GSAP or Lottie might be more suitable.

Step 2: Obtain the Animation Library Files

Once you have chosen an animation library, you need to obtain the necessary files for embedding the animations in Webflow. The files usually consist of CSS and JavaScript files specific to the chosen library.

  • Animate.css: Download the latest version of Animate.css from their official website. Extract the downloaded ZIP file to get the CSS file required for embedding.
  • GSAP: Visit the official GreenSock website and download GSAP.

    Extract the ZIP file to obtain the required JavaScript file.

  • Lottie: Lottie can be installed using npm or downloaded directly from their official GitHub repository. Refer to the documentation for detailed instructions on installation and usage.

Step 3: Add the Animation Library Files to Webflow

Now that you have obtained the necessary files, it’s time to add them to your Webflow project. Follow these steps:

  1. For Animate.css:
    • Create a new folder in your Webflow project’s asset manager, e.g., “css”.
    • Upload the extracted Animate.css file into this folder.
    • In your Webflow Designer, open the project settings and go to the “Custom Code” tab.
    • Paste the following code within the <head> tags:
      <link rel="stylesheet" href="/css/animate.css">
  2. For GSAP:
    • Create a new folder in your asset manager, e., “js”.
    • Upload the extracted GSAP JavaScript file into this folder.
    • Paste the following code before </body>:
      <script src="/js/gsap.min.js"></script>

    Note:

    If you are using Lottie, follow the documentation provided by the library to add the necessary files to your Webflow project.

Step 4: Apply Animations to Webflow Elements

Now that you have added the animation library files, it’s time to apply animations to your desired Webflow elements. Let’s see how:

  1. For Animate.css:
    • Select the element you want to animate in your Webflow Designer.
    • In the “Settings” panel on the right-hand side, scroll down to the “Custom Attributes” section.
    • Add a new attribute named “class” and set its value as the desired animation class from Animate.css. For example, “animated bounceInLeft”.
  2. For GSAP:
    • In your Webflow Designer, select the element you want to animate.
    • Add a unique class name or ID to identify this element.
    • In your custom JavaScript file (or within a script tag if using inline JavaScript), write code using GSAP functions to animate the selected element. For example:
      gsap.to(".my-element", { duration: 1, x: 100 });

    Note:

    If you are using Lottie, refer to their documentation for instructions on applying animations using their library.

Step 5: Preview and Publish Your Animated Website

Congratulations! You have successfully embedded animations in your Webflow project.

It’s time to preview and publish your animated website. Follow these steps:

  1. In the Webflow Designer, click on the preview button to see how your animations look and interact.
  2. If everything looks good, go to the “Publish” tab and publish your website to make it live on the web.

That’s it! Now you know how to embed animations in Webflow using various animation libraries.

Experiment with different animations and libraries to create stunning effects that enhance user experience on your website. Happy animating!