The lemonade website had very specific placement. How can this placement be carried to mobile? I’ve had issues in the past trying to make sure everything lines up on other devices.
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.
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?
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?
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!
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?
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 :)
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?
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?
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
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?
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, 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!
Internet Explorer has left the chat
Error 404, browser not recognized!
The lemonade website had very specific placement. How can this placement be carried to mobile? I’ve had issues in the past trying to make sure everything lines up on other devices.
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?
This is C R A Z Y! Guess I'm going to have to brush off my After Effects skills!
"brush up on my"
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.
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 👏🏻👏🏻👏🏻
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 would like to know this
Thanks, Ran. It was such a hassle dealing with JSON code embeds and JS files manually!
SO excited to try out this new feature!
This is what i was allways waiting for. Thanks
NO WAY MAN!!
I'M RAIDING WEBFLOW NOW!
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?
I appreciate you made a tutorial on such animation which makes website cool and trending ..
This is the reason why i subscribed your channel
Beauty! Now we gonna take webflow seriously!
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.
This is exactly what I was looking for. Thank you so much for posting this!
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
The best news ever!!!! Awesome!
Really mind blowing, can't wait to test it!! thank you Ran you are the best.
So excited about this! Thanks for the help Ran :)
is webflow compatible with wordpress plugin such as fluent form ?
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?
How can I add sound effects to a button click in Webflow? Or is that not possible at this time?
תודה לך רן על כל המדריכים המדהימים!
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?
Can we use this for a google banner ad tho? :o
Insane. Absolutely insane 😱
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!
Mindblowing.
Thanks for this valuable trick
Is this possible with framer?
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?
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 :)
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?
how do you make the drawing animate with scroll across the full page from top to bottom though?
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?
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.
Hey, does this work for only adobe after effects ?
Can it work for other alternatives such as Blender, even davinci resolve motion graphics?
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
Great video mate. Cheers for the info!
This will make me sign up to webflow now!!!!
Thank's Ran. Webflow is best
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?
Does this work on mobile too? New to Webflow...
Awesome! Thank you!!
Awesome!
Is there any way to create Lottie files with software other than After Effects?
Is anything like this available for wix?
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..
Thanks for sharing!
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!
Hey Ran. thanks.
There is a way to transfer also vector manipulation such as 'roughen edges'?
Hey flux, is there any way that I can add a custom thumbnail to a RUclips video in webflow?
Wtf this is so sick!!
pretty cool bro, really useful thanks a lot!
no wayyyyy. we had to do some workarounds for www.uscnyc.com, i wish this was released months ago!
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.
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?
Love it! Can't wait to try it out on sites. =)
Why would anyone put a thumbs down!
Man o man! Can’t wait
Wowwww.. I NEED TO GET INTO WEBFLOW ASAP... this is fukn amazing..
awesome :: thx for that
#Elementor needs this to!
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.
I went to the lemonade website I cant see this animation😩
what about 3d animation ?
Game changer!
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?
Awesome!!
Heyyy i miss that "byeeebyeeee" Outro 😅
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