Video Animation

Community resources Product feedback
1

Hi, I was wondering how they enable video scroll animation in this website: https://www.starbicycle.ch/
(for example, when scrolling down the page and the bike pedals)

I’ve exported Lottie animations from After Effects, importing the json file into Webflow and controlling it via the scrolling interaction. I tried the same method with video but it won’t appear in the Webflow canvas. I first exported a 3 sec., 1920x1080 video from After Effects as a jpeg sequence. I brought that sequence back in, making sure the clip is the same length and therefore just a sequence of jpegs. Then I exported the sequence from bodymovin as a json. I brought it into Webflow and set it in a div but it wouldn’t even appear on screen. In order to test my methodology, I then brought in the json of the vector animation I previously exported and it worked. So, I’m at a bit of a loss. Thanks for any help you can offer!

2

Nevermind, I got it to work. In case anyone else has the same question, I used the above methodology. However, just as he compressed the animation here at 19:00 (Lottie Animation), I made the mistake of not compressing enough. I finally set it to 30 and it worked. The file size was below 30 mb after export, whereas the others were above, so that might be another contingency. Files larger than 30mb won’t usually upload into assets, but the larger json’s would, they just wouldn’t show up in the thumbnail or drag and drop onto the canvas. But this new method works (a picture shows up in the thumbnail in assets and drops perfectly onto the canvas) and it will also move while scrolling when I set the interactions to do so.