How to animate a video on scroll — After Effects & Lottie in Webflow

After converting a video to a JPEG sequence, you can export a JSON from After Effects and animate the sequence as you scroll down the page.

Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

----------

[petrajovkov]

To everyone having the same issues: you will have to enable the option "Allow scripts to write files access Network" in After Effects/Preferences/Scripting & Expressions. Otherwise the render will fail.

[julialee]

Having seen a of these webflow videos (love them all btw), I'm happy to see that a comfortable balance between humor and instruction has been achieved :)

[lakeishajoshy]

Can’t get over how professional yet humorous these videos are, kudos!

[bidecui]

I'm switched over to Webflow completely. Such a wonderful tool. And these tutorials are industry-leading, simply The BEST!

[danielledino]

OMG finally an instructional video that doesn't blab on and on before getting to why I came here. THANK YOU! Concise, clear, and funny to boot!

[dmitriy]

This guy cracks me up more than some of the top comics! AND I learn bunch of new stuff 😅

[StevenHogenbosch]

Hahaha, looove your sense of humor! And the animated sequence's not bad either.

[jimphillips]

These are the best tutorails on the web. (Love the sense of humor and dry delivery as well!). Thank you, and bravo!

[theofani]

Wooww thanks man! You’ve made it looks simple and easy 👍 I love this tutorial!

[fixmysync]

"And this is the important part, in addition to all the other important parts"
"Why? No idea?! But here's why."
Absolutely love the dry wit of this guy (or his writer)!! Hands down, the most entertaining tutorials I've every watched!

[billbuckleytutorials]

So funny and also informative . Best Intros and tutorials out there hands down.!

[joedoe]

I like these tutorials, hilarious and educational, great stuff 👌

McGuire, what a surprise. Good on you working for Webflow.

[VitaminStudios]

Oh so this is what the voice over guy looks like!! I've been listening to your voice for years in the tutorials LOL

[Adanmacreates]

Duude you're blowing my mind right now

[promartech]

Super! This is the magic of Webflow :))

[patientprogrammer]

Omg. I tryed to import 89 frames separatly in webflow and animating the opacity at each one of them. Felt like a stupid robot. Thank you !!!

[TheMarkDrake]

Great job on the video and all the work and effort your team puts into WebFlow. It's a great product and I love where it's going.

Really nice things have been accomplished by using full video playback - one that comes to mind immediately is Apple's previous Mac Pro page (you could see the computer being built and exploded for an inside look at individual components).

If you don't have a need for transparency (and thus you'd be using PNGs) you can accomplish this same thing without using an image sequence at all, just use the original video. A video element can be "played" by setting the currentTime (calculating what frame number you should be on). Your scroll handler would simply calculate this and set the time accordingly.

My question - does WebFlow support video and the scroll trigger right now (or will you in the future)? Also, what criteria would you consider when choosing to use a lottie animation (this image sequence technique) over using the original video? Some come to mind that are obvious (file size, need for transparency, how often a component may be updated and who its updated by).

Keep up the great work!

[danielyeh]

*that's the effect that i just want !!THX*

[benton]

lol i shouldn't be enjoying tutorials like this lol, nice work mate, I learn and laugh at the same time