How to get video to play using lottie animation

Design help Animations & Interactions
1

I’m using an actual film, real footage and would like to get that to animate on scroll using Lottie. My film is 2.4mb and I followed the tutorial on webflow and exported the json file which was 23.6mb- naturally the video won’t play- and I suspect it’s because the json is too large. I’m new to all things video/compression- but what can I do to get this to show up just like in the webflow tutorial How to animate a video on scroll — After Effects & Lottie in Webflow - YouTube

thank you!

Here is my public share link: https://preview.webflow.com/preview/test-c30dd6?utm_medium=preview_link&utm_source=designer&utm_content=test-c30dd6&preview=779ada26d4b8dbac4cb4f9d37b14fb13&mode=preview

2

Hi Johnny,

Just made this happen in your share link. You just need a page trigger interaction. Here’s how you can do this:

  • Click on your Lottie animation in the designer

  • Go to the interactions tab on the right panel

  • Click the plus icon under page trigger and choose while page is scrolling

  • Click the plus for a new scroll animation

  • Webflow will automatically add a start and end point

  • You can play around with this, but basically it’s asking where should the video playback be when you get to a certain progress of the entire page scroll.

  • I just entered 0% for the top and moved the 2nd element to be at 15% of the scroll and at 99%

    image
    image482×1638 47.9 KB

  • If you go back to your designer, the page really doesn’t scroll, so the page can’t play your animation on scroll. The page needs to be longer.

  • If you just want to test it, you can set div block 3 to something like 200vh as the height

  • Go into preview mode and you should see that your video plays frame by frame as you scroll.

let me know if this solves your problem or if you need more help.

Thanks!