Is it possible to link a lottie animation to scroll with a different element other than the body in Webflow?

Yes, it is possible to link a Lottie animation to scroll with a different element other than the body in Webflow. By default, Webflow's scroll trigger feature is set up to scroll animations based on the body element. However, with a little bit of custom code, you can achieve the desired effect.

Here's how you can do it:

1. Add a div block: First, add a div block to your Webflow project. This div block will serve as the element that triggers the scroll animation.

2. Set up the animation: Next, go to the Lottie animation component and set up your animation as you normally would. Make sure to select the "Scroll" trigger type.

3. Add custom code: To make the animation scroll with the div block instead of the body, you'll need to add some custom code. Click on the </> icon in the top-right corner of the Designer to access the Custom Code panel.

4. Write the code: In the Custom Code panel, write the following code:

<script>    document.querySelector('.your-div-block-class').addEventListener('scroll', function() {        let scrollAmount = this.scrollTop;        Webflow.require('lottie').scrollToFrame('.your-lottie-animation-class', scrollAmount);    });</script>

Make sure to replace .your-div-block-class with the class name of your div block, and .your-lottie-animation-class with the class name of your Lottie animation.

1. Save and publish: Save your changes and publish your site for the custom code to take effect.

With this custom code, the Lottie animation will now scroll with the specified div block instead of the body. You can customize the code further to achieve different effects based on your specific requirements.

Example:

Let's say you have a section with the class name "scroll-section" and a Lottie animation with the class name "lottie-animation". Here's how the code would look:

<script>    document.querySelector('.scroll-section').addEventListener('scroll', function() {        let scrollAmount = this.scrollTop;        Webflow.require('lottie').scrollToFrame('.lottie-animation', scrollAmount);    });</script>

This code will make the "lottie-animation" follows the scrolling of the "scroll-section" div block.

By following these steps, you can link a Lottie animation to scroll with a different element other than the body in Webflow.

Additional Questions

1. How do I create a Lottie animation in Webflow?
2. What are the different trigger types available for animations in Webflow?
3. Can I use ScrollMagic library with Webflow to create scroll animations?