How to animate a video on scroll - After Effects & Lottie in Webflow
Вставка
- Опубліковано 12 вер 2024
- 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.
Full course, plus downloadable assets: wfl.io/after-e...
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow
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.
Appreciate you
ily
thanks a lot!!
This was SO needed, thank you!!
Thanks Man!!!
Can’t get over how professional yet humorous these videos are, kudos!
Glad you're enjoying the videos! :)
Having seen a tonnnnnn of these webflow videos (love them all btw), I'm happy to see that a comfortable balance between humor and instruction has been achieved :)
Hahaha, looove your sense of humor! And the animated sequence's not bad either.
I want this guy to narrate my life.
😂😂😂😂😂😂😂 wont actually be a bad idea👌
get in line
I dont mean to be off topic but does someone know of a method to log back into an Instagram account..?
I was dumb lost the login password. I love any tips you can give me!
@Bentlee Fox instablaster :)
@Sebastian Zechariah I really appreciate your reply. I got to the site through google and Im waiting for the hacking stuff now.
Seems to take quite some time so I will reply here later with my results.
This guy cracks me up more than some of the top comics! AND I learn bunch of new stuff 😅
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!
I'm switched over to Webflow completely. Such a wonderful tool. And these tutorials are industry-leading, simply The BEST!
These are the best tutorails on the web. (Love the sense of humor and dry delivery as well!). Thank you, and bravo!
"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!
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 !!!
I'm trying to build the json following your steps, just with png images, and I'm getting "Render Failed" everytime, any thoughts? :(
Nevermind. Is working now. I forgot the step of "After Installing" explained on the lottie github. It's the following:
Go to Adobe After Effects > Preferences > Scripting & Expressions... > and check on "Allow Scripts to Write Files and Access Network"
Thank you for the help so much. I spent about an hour trying to get this to work until I found your comment which saved me
@@byinfinita You are a lifesaver. My wife almost divorced me over how obsessive I became with this
@@byinfinita Thank you for saving my sanity
You're the hero gotham deserves, but not the one it needs right now
People having redering problems, make sure you have this checkbox on. Edit > Preferences > Scripting & Expressions... > and check on "Allow Scripts to Write Files and Access Network"
You're a HERO!
LEGEND thank you!
McGuire, what a surprise. Good on you working for Webflow.
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!
man you are the best teacher in the world you should be the next James Bond charector🔥🔥❤❤
Oh so this is what the voice over guy looks like!! I've been listening to your voice for years in the tutorials LOL
Mateeeeeee... the possibilities are endless..💛
Man, I laughed out loud at that Jeopardy joke. haha!
Wooww thanks man! You’ve made it looks simple and easy 👍 I love this tutorial!
This is great, thanks so much!
So funny and also informative . Best Intros and tutorials out there hands down.!
Duude you're blowing my mind right now
Luv body movin and Lottie!
Who is this maniac? ❤️
His name is McGuire Brannon. I'm a fan too 😂
I like these tutorials, hilarious and educational, great stuff 👌
so this is the voice-over guy i heard in all those webflow tutorials
lol i shouldn't be enjoying tutorials like this lol, nice work mate, I learn and laugh at the same time
So happy to finally learn this!
My json file is exporting around 40mb, its getting uploaded on the assets panel but not showing on the page when i am dragging it. HELP PLEASE!!!
Same is happening to me, Lottie shows on preview into assets panel but when dragged in the page, even setting width and height, it's invisible.
Any thoughts?
Where can I find the example project with rose animation?
I tried to make this but it doesn't work with the fixed position. Only with sticky but the lottie animation stops playing I don't know why.
this is... beautiful!
Hey, this is cool. But what if I need to put 2 or 3 sections with animated sequence on the page? I'm stuck with the positioning.
Any luck with an answer to this?
Hey, have you had the solution for that ??? I have the same probleme as yours
how do you do this without After Effects???? Any tools to convert multiple JPEG frames or MP4 to a Lottie ?
Try it out with keyshape
Can't believe Jeopardy never got back to you! Ruuude...
*that's the effect that i just want !!THX*
Super! This is the magic of Webflow :))
I have problem-when I scroll down page, the animation is blinking. However if scroll down and up 10 times, the animation works smoothly. How can I solve this problem???
Browser Safari
I've not stopped by for a long time but where's Nelson?
Hey, dope tutorial thanks a lot. I'm running into an error when rendering with bodymovin saying "After Effts Warning: Could not create the file [location of my .aep file]. Access denied"
Anyone experiencing something similar? I've tried going into the preferences files for the AE and making sure they're all writable. I think it might be a side-effect of how secure Apple made macOS Catalina. Any suggestions are very appreciated. Thanks
You are the man.
You saved me, Thanks!
BRAVO and THANKS !!!!
That ending made me la
Just perfect!
AAAmazing omg
Hi! I followed every ste, but my lottie is not working in webflow, (33MB) any idea?
Neither mine
i got a problem, when i make my png sequence (20png) and export with bodymovin, at the end there is nothing into my json file (7Ko) i don't know why
can we help me ?
however i got the last version of bodymovin
I want all the professors to take his course on " How to teach "
Hi, is there any way I could make the animation play until the middle of the sequence when opening the site, and then continue playling when scrolling down?
Im not sure why but the preview shows all the animations running perfectly, except it's not! At least not in any smartphones that I've checked in. IS this Animate while scroll only works on Desktop and tablets?
Great tutorial. But isn't it possible to skip step 1 and 2 with AME and just import the MP4 video into AE and then export the image sequence via the bodymovin render queue?
Hi, Sebastian! Great question. If you put an MP4 directly into an After Effects composition, the Bodymovin extension will ignore it. Video formats don’t seem to be currently supported, which is why we start by converting the video into an image sequence. JPEG and PNG seem to work fine! 👍
@@Webflow ok - good to know! Thanks again!
@@Webflow I loaded jpg images from an animation made in Blender. I get a JSON file from bodymovin but the json doesn't seem to work. I get invalid file when trying to use the JSON file generated. Is there any reason why this might be happening?
where is the course of the second rose ? I searched on webflow but didn't find.
I've been searching everywhere for this too! This is the exact functionality I need for a project but the lesson has fallen off the face of the internet. :(
What if you want you want the animation to stay in a section so it stays put until the animation is complete then you can scroll to the next section?
any thoughts on how to do that now?
somebody had found a solution, please ?
anyone solved it?
I love it.
This is great, thank you. You have a weird edit in the video though. You instruct to drop all the images direclty on the layers, but then you show the footage of the single composition from selection window, and there is nothing in the layers view. You don't actually show how to get to the single composition from selection window. Thank you.
Damn, this guy could even convince me to go to war.
How can I play the full scrolling Lottie animation taking up the whole viewport like this but then be able to scroll into sections below? Having a hard time doing this with the animation in a fixed position
This dude is insane..
Hi, learning a lot here, can I just ask, is there a reason you didn't just import the JPEG sequence as an image sequence in AfterEffects, so you don't have to have a million layers on the timeline? Is it to do with the Bodymovin exporter?
Correct! Image sequences aren’t supported by Bodymovin.js.
Can the image sequence simply be transparent?
Will this work on a Thinkpad?
Hi! I'm having trouble making my PNG sequence into a JSON. I keep getting an error "Function item.outputModule is undefined." and I can't find any solution to troubleshoot that. Is there a workaround to create the same effect in webflow but I just export my animation as JSON directly without going through the image sequence step? Thank you!
Here is a free tool that may help with that: observablehq.com/@forresto/video-to-lottie
what if i want it to play 0%-100% within the scroll of a 100vh div, instead of the whole page?
Hey, Did you get the answer? I trying to do exactly what you put as an example
@@zuka_gamer Hey! Just use element trigger "While scrolling in view" instead of page trigger
@@Vlad-vd2on Yes man, I did as you said. That was a rush project lol. Thanks
I have an issue that Lottie option in scroll animation doesn't even come up as an option?
Can you post this question and your project's read-only link on our forum?
discourse.webflow.com
university.webflow.com/lesson/share-your-site
Can you use webp format? Thanks.
I have a face issue with Lottie [?]
This lottie action does not have a value applied. Configure the action with at least one value. You can configure it below this list.
Anyone can fix it and let me know.
Thank you in advance.
hey is there anyway to reduce the file size {json}. It was like 12 mb for me
Can't upload in website its lags.
Webflow, changing the web. See you in Nov!
Totally agree
how to make the rose video? what is the name of the application?
How does one get access to these kinds of animations? Does anybody know a good resource? :) thx
You can get such animations from lottiefiles.com/featured
I have followed this tutorial but... The json file is 44 MB with 6 seconds of animation is that normal? (compression of images set to 45)
Try using this free webapp from an ex-Webflower: observablehq.com/@forresto/video-to-lottie
Hope this helps :)
Hi, I tried to put jpg/png in the sequence, and render it with bodymovin, it’s not working, they just told me I failed to render and when I try to preview it, I see nothing. I tried the “Allow scripts to write files access Network” and nothing change.
Yep, same here - our studio has tried every which way to get this to work, first with our own video/JPG export and then with @Webflow 's files. We've tried LottieFiles as well as BodyMovin, neither of them is able to create a valid Lottie. :/ Not sure what's going on here or whose "fault" it is (seems like Adobe my have screwed something up?), but it would be great if someone at Webflow could look into it and amend the video description to help us break through this roadblock.
Nothing happening for me, the image still not moving
hmmm, export to JSON Failed?
hey, i want my animation finish by scroll and we could go to the second section in the same page, is that possible ?
Yes. Just make sure your last action is at the 100% point in your animation timeline. If you need further help with your design, please post your question on our forum at discourse.webflow.com
You are so amazing and funny
HEEELP plz :) ! - I did all the steps nice and tidy but when I render with bodymovin it always fails to render. "render failed" what else can i do?
Answer up on this page, from Petra Jovkov: 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.
@@ivonnegracia9193 indeed I found it somehow will retry now thanks a lot!
But how do you do this for a section only - not the whole page.
hey, did you found out? ^^
hei where is queue window? i am looking around and didn't find it.
I'm not sure what you are referring to when you say "queue window". Can you further explain so I can better assist you?
what do do if you don't have after effects?
Hi, Vansh Singh Tanwar! Right now, the Bodymovin extension only supports Adobe After Effects. To learn more, check out Airbnb’s official Lottie site at airbnb.io/lottie/
omg its the narrator!!!!! HES REAL!!
How does this work on mobile?
I have 10 images, I want this kind of animations based on the scroll. Please help
Hi Sanjay! Can you please join us on the Webflow Forum regarding this question?
We're here to help!
forum.webflow.com/
It feels like I am listening to Ryan Gosling from the movie Free Guy.
2:29 AQUI BRENDA
tutorials out of date, body movin now only renders a blank black screen.
What happened to this guy, I want him back in my life
One Million Years Later - Exporting: 001.png :(
is it possible to do it with png sequence?
He literally tells you PNG is fine at 1:17
why is that? no idea, except here's why.... 🤣🤣🤣
I cant get this to work with a .png sequence, it exports fine but when I pull it into webflow I get a funny place holder instead of the animation. I need the alpha channel, is this possible?
You might need to compress and re-export your Lottie file if its above 10 megabytes. Hope this helps :)