How Do You Animate a Video on Scroll After Effects and Lottie in WebFlow?

by

Animating a video on scroll can add an extra layer of interactivity to your website. With the combination of Adobe After Effects and Lottie in WebFlow, you can achieve stunning animations that respond to user scrolling. In this tutorial, we will walk you through the process of creating a scroll-triggered animation using these powerful tools.

What You Will Need

  • Adobe After Effects
  • Lottie Files
  • WebFlow account

Step 1: Design and Animate Your Video in After Effects

To start, open Adobe After Effects and import your video file. Create a new composition with the desired dimensions for your animated video. Design your animation by adding keyframes, effects, and transitions.

Pro Tip: Keep in mind that the length of your video should match the scroll duration on your website for a seamless experience.

Add Scroll Trigger to Your Composition

To add a scroll trigger to your composition, you’ll need to install a plugin called Bodymovin. Bodymovin allows you to export your After Effects composition as a JSON file that can be used with Lottie in WebFlow.

Here’s how to install Bodymovin plugin:

  1. Open After Effects and go to “Edit” > “Preferences” > “General”.
  2. Select “Scripting & Expressions” and check the box next to “Allow Scripts to Write Files and Access Network”.
  3. Restart After Effects.
  4. Download Bodymovin from the official GitHub repository.
  5. Extract the downloaded ZIP file.
  6. Copy the “bodymovin” folder to your After Effects plugins directory.

Step 2: Export Your Animation as a Lottie JSON File

Once you’ve installed Bodymovin, you’re ready to export your animation as a Lottie JSON file.

  1. Select your composition in After Effects.
  2. Go to “File” > “Export” > “Add to Render Queue”.
  3. In the Render Queue panel, click on “Lossless” under the Output Module section.
  4. Select “Bodymovin” from the Format drop-down menu.
  5. Choose a destination folder for your exported file and click on “Render”.

Step 3: Import and Configure Lottie in WebFlow

Now that you have your Lottie JSON file, it’s time to import and configure it in WebFlow.

  1. Login to your WebFlow account and select the project where you want to add the animated video on scroll effect.
  2. Navigate to the page where you want to place the animation and add a new HTML Embed element.
  3. In the HTML Embed settings, click on “Upload JSON File” and select your exported Lottie JSON file.
  4. Adjust the animation settings like speed, playback mode, and loop options according to your preference.

Step 4: Add Scroll Interaction in WebFlow Designer

To trigger the animation on scroll, we’ll use WebFlow’s built-in scroll interaction feature. Here’s how:

  1. Select the HTML Embed element that contains your animation.
  2. In the Interactions panel, click on “While Scrolling into View”.
  3. Configure the scroll trigger options, such as offset and duration.
  4. Add a new action and choose “Start Animation” from the dropdown menu.

Step 5: Test and Publish Your Animated Video on Scroll

Finally, it’s time to test your scroll-triggered animation. Preview your website in WebFlow Designer or publish it to a live URL to see the animation in action as you scroll.

Pro Tip: Experiment with different scroll trigger options and animation settings to achieve the desired effect.

In Conclusion

Animating a video on scroll can be an attention-grabbing addition to your website. By combining Adobe After Effects, Lottie, and WebFlow’s scroll interactions, you can create captivating user experiences that leave a lasting impression. So go ahead, unleash your creativity, and bring life to your web pages!