This is nice! However, if you've used lottie/bodymovin, you'll have to play around with it to make sure you're making compliant layers that translate into SVG, so be wary, not everything you make in AE will translate. You may need to read documentation to see what makes production ready SVG.
This is fab stuff a nice surprise i never expected SVG animation might get added in not heard any news on this - looking forward to this as will be a splendid addition for some custom interactivity and differentiators
Man, thats incredible!...I was just thinking about how I might do something similar. I'll wait for the feature to be released...Thanks for the update Ran!
Thanks so much for pulling this tutorial together! I am actually trying to replicate the Lemonade animation on my website and I have many questions... Can you show how you add Lottie vertically instead of horizontally? How do you create the right effects in AE? How do you add the red ball? Using Add nulls? How do you speed up the animation when it stays longer in one area (the brain area and all of the other designs along the line)? Do you do it in AE or in Webflow? How do you make it responsive? Thanks!
and one more question.. which website you are showing (Lamonade) .. do you think they made a long (vertical) animation and then placed it how you placed it? i mean what size of the video 8-10 thousands pixel tall?
I know this video is old but does this work with text animation? I have a simple animation where there is three lines of text. In the second line (middle text), it has a scrolling up effect. When I tried exporting with Bodymovin, my animation doesn't show up. Only the first and third line since it is static.
I'm curious to know why big companies eventually do away with their animations. Lemonade doesn't have one anymore. Airbnb has given up on its video loop. Is it because of SEO?
There is a way to control the animation by the page height ? for example in a page high 2000px i want that the animation works from 0 to 300px height! thanks :)
Please what IDE are you using to build the website? Also does Lottie work on only svg files? I have an animation that contains images would Lottie work on it?
This is great.. I'm getting started with a project where I'd like to make a map of a mall and you can click the individual stores for more information.. do you have any idea how to go about that and make it responsive for mobile?
How would you structure the lottie animation on Webflow for a whole page like that example website you showed at the start? Because it has normal website elements on top of the lottie animation. Do you do a very long lottie animation? How do you get the spacing right for the elements at different parts of the lottie animation at different parts of the page?
I tested this.today with animations. It's.insane. But it won't do simply anything though. I had a video slideshow animated with a transition effect. The transition wouldn't appear but everything in between would. Why?
Hi i am a big fan of yours.. i want to learn from you (not webflow) UI/UX .. do you take online classes? .. and can you share if you have any animation made for the website .. in which form you supply it to coder or client?
What are the AE composition dimensions for this animation? If the breakpoint you are applying it is 1920px, does the composition needs to be at that size also? Is there a byte size I need to be aware of to optimize page loads?
Hey, that was really helpful I'm working on a website and also i wanted to add same type of animation over there. the website is being developed in html css and is responsive too. now I'm facing the problem to make the animation in a responsive way that renders according to the screen adjustment's. Please help. thanks.
SK Works it will work with a .json file so if you have any other software that can spit those out you should be fine. But AE with bodymovin is the one 👍
Great video, Ran! We're just as excited about this update!
Thank You Webflow!!! I'm currently taking Ran's Master Class, and I'm so excited to be able to integrate AE animations! This is truly a game-changer.
This feature with modymovin is pretty epic, did some basic and I needed the dev team to integrate the exported json.. This is a game changer!!!!
Okay... NOW I'm switching from Elementor to Webflow TODAY. Game changer!
This is such a cool feature. Been working with Lottie for a while and this will save me loads of time.
Yay!
Webflow when will it be live?
I appreciate you made a tutorial on such animation which makes website cool and trending ..
This is the reason why i subscribed your channel
Internet Explorer has left the chat
Error 404, browser not recognized!
This is C R A Z Y! Guess I'm going to have to brush off my After Effects skills!
"brush up on my"
NOOOOO !!! Amazing feature can't wait to try it ! Awesome video as always !
That's a great addition Ran! I love Lottie since it first appeared, so this is rock'n'roll!
Your beard game is strong today, Ran. Thanks for the vid, as per usual.
I was literally searching for this yesterday, spent a whole day agonising over it. Did you read my mind??
same here i saw this in a medium post somewhere and was trying to figure out how it could be done.. wild
Honestly this is completely insane 👏🏻👏🏻👏🏻
This is what i was allways waiting for. Thanks
This is nice! However, if you've used lottie/bodymovin, you'll have to play around with it to make sure you're making compliant layers that translate into SVG, so be wary, not everything you make in AE will translate. You may need to read documentation to see what makes production ready SVG.
NO WAY MAN!!
I'M RAIDING WEBFLOW NOW!
SO excited to try out this new feature!
Really mind blowing, can't wait to test it!! thank you Ran you are the best.
This is fab stuff a nice surprise i never expected SVG animation might get added in not heard any news on this - looking forward to this as will be a splendid addition for some custom interactivity and differentiators
תודה לך רן על כל המדריכים המדהימים!
Man, thats incredible!...I was just thinking about how I might do something similar. I'll wait for the feature to be released...Thanks for the update Ran!
This is exactly what I was looking for. Thank you so much for posting this!
So excited about this! Thanks for the help Ran :)
Beauty! Now we gonna take webflow seriously!
Thanks so much for pulling this tutorial together! I am actually trying to replicate the Lemonade animation on my website and I have many questions... Can you show how you add Lottie vertically instead of horizontally? How do you create the right effects in AE? How do you add the red ball? Using Add nulls? How do you speed up the animation when it stays longer in one area (the brain area and all of the other designs along the line)? Do you do it in AE or in Webflow? How do you make it responsive? Thanks!
Thanks for this valuable trick
Insane. Absolutely insane 😱
Mindblowing.
and one more question.. which website you are showing (Lamonade) .. do you think they made a long (vertical) animation and then placed it how you placed it? i mean what size of the video 8-10 thousands pixel tall?
I would like to know this
pretty cool bro, really useful thanks a lot!
Thanks, Ran. It was such a hassle dealing with JSON code embeds and JS files manually!
Great video mate. Cheers for the info!
This will make me sign up to webflow now!!!!
The best news ever!!!! Awesome!
Wtf this is so sick!!
Thank's Ran. Webflow is best
Awesome! Thank you!!
Man o man! Can’t wait
Thanks for sharing!
Does anyone knows how lemonade's team designed the animation for the whole page instead of one section or a smaller portion of the page?
Love it! Can't wait to try it out on sites. =)
Can we use this for a google banner ad tho? :o
I know this video is old but does this work with text animation? I have a simple animation where there is three lines of text. In the second line (middle text), it has a scrolling up effect. When I tried exporting with Bodymovin, my animation doesn't show up. Only the first and third line since it is static.
Hey Ran,
great Video as always!
But when does this Feature get released?
Thanks in advance. :)
We cannot announce any dates but sometime this month!
@@Webflow Wow thanks. Thats waaay sooner than I anticipated.
You guys rock!
I'm curious to know why big companies eventually do away with their animations. Lemonade doesn't have one anymore. Airbnb has given up on its video loop. Is it because of SEO?
Will the bodymovin/lotti work if the AE comp has 3D shape layers and a custom camera view?
Thanks for this video! Great tips as usual
Tommy Howarth no unfortunately not
How can I add sound effects to a button click in Webflow? Or is that not possible at this time?
is webflow compatible with wordpress plugin such as fluent form ?
There is a way to control the animation by the page height ? for example in a page high 2000px i want that the animation works from 0 to 300px height! thanks :)
Game changer!
Awesome!
Is there any way to create Lottie files with software other than After Effects?
Is this possible with framer?
Please what IDE are you using to build the website? Also does Lottie work on only svg files? I have an animation that contains images would Lottie work on it?
no wayyyyy. we had to do some workarounds for www.uscnyc.com, i wish this was released months ago!
This is great.. I'm getting started with a project where I'd like to make a map of a mall and you can click the individual stores for more information.. do you have any idea how to go about that and make it responsive for mobile?
awesome :: thx for that
Wowwww.. I NEED TO GET INTO WEBFLOW ASAP... this is fukn amazing..
how do you make the drawing animate with scroll across the full page from top to bottom though?
Do you have a method payment for your masterclass? I mean, can we pay it in payments or not.. I want to enrolled n learn..
How would you structure the lottie animation on Webflow for a whole page like that example website you showed at the start? Because it has normal website elements on top of the lottie animation. Do you do a very long lottie animation? How do you get the spacing right for the elements at different parts of the lottie animation at different parts of the page?
#Elementor needs this to!
Does this work on mobile too? New to Webflow...
I tested this.today with animations. It's.insane. But it won't do simply anything though.
I had a video slideshow animated with a transition effect. The transition wouldn't appear but everything in between would. Why?
Hey Ran. thanks.
There is a way to transfer also vector manipulation such as 'roughen edges'?
Is anything like this available for wix?
Awesome!!
so technically we should be able to use it animations made using software other than After Effects as long as it is in .json format.
Hi i am a big fan of yours.. i want to learn from you (not webflow) UI/UX .. do you take online classes? .. and can you share if you have any animation made for the website .. in which form you supply it to coder or client?
Hey, does this work for only adobe after effects ?
Can it work for other alternatives such as Blender, even davinci resolve motion graphics?
Hey flux, is there any way that I can add a custom thumbnail to a TH-cam video in webflow?
What are the AE composition dimensions for this animation? If the breakpoint you are applying it is 1920px, does the composition needs to be at that size also? Is there a byte size I need to be aware of to optimize page loads?
It is SVG, so the size in pixels will not matter. What does matter is the aspect ratio.
I went to the lemonade website I cant see this animation😩
hey man! while using Webflow I see that the most number of projects I can 'buy' is 30... Is there an option to buy more? like 100?
Hey,
that was really helpful
I'm working on a website and also i wanted to add same type of animation over there. the website is being developed in html css and is responsive too.
now I'm facing the problem to make the animation in a responsive way that renders according to the screen adjustment's.
Please help.
thanks.
you probably have to use different animations for different breakpoints, if one doesn’t look right.
Why would anyone put a thumbs down!
Heyyy i miss that "byeeebyeeee" Outro 😅
what about 3d animation ?
Only AE or from any compositing applications?
SK Works it will work with a .json file so if you have any other software that can spit those out you should be fine. But AE with bodymovin is the one 👍
Amazing fast! Just wanted to know which software you are using for integrating SVG animation into webpage?
yes game changer :D
Wow
whoa… awesome shit (sorry)
aint that some shizznitt
You can do the same with Elementor and Lottie ...
How can you do this in elementor ?
@@louloudiene get
LOTTIEFILES BODYMOVIN FOR ELEMENTOR
can you connect lottie files to scroll position with Elementor?
@@pixelgeek i think yes... but maybe you need to add some extra CSS... manualy....
F a T J a Y thank you I will check it out