Adding After-Effects Animation to your Webflow Website (Lottie Integration)

[@Webflow]

Great video, Ran! We're just as excited about this update!

[@JesseMoffett]

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.

[@MrENGINE24]

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!!!!

[@robertvidaure6746]

Okay... NOW I'm switching from Elementor to Webflow TODAY. Game changer!

[@link5059]

This is such a cool feature. Been working with Lottie for a while and this will save me loads of time.

[@Webflow]

Yay!

[@link5059]

Webflow when will it be live?

[@anupkaushik9370]

I appreciate you made a tutorial on such animation which makes website cool and trending .. This is the reason why i subscribed your channel

[@nathandennis5074]

This is C R A Z Y! Guess I'm going to have to brush off my After Effects skills!

[@gkstr11]

"brush up on my"

[@Fedecki1]

NOOOOO !!! Amazing feature can't wait to try it ! Awesome video as always !

[@nickjones605]

Your beard game is strong today, Ran. Thanks for the vid, as per usual.

[@fabienb]

That's a great addition Ran! I love Lottie since it first appeared, so this is rock'n'roll!

[@Caboomraider]

Internet Explorer has left the chat

[@rosscarter8913]

Error 404, browser not recognized!

[@fabricepohlmann302]

Honestly this is completely insane 👏🏻👏🏻👏🏻

[@tabithaemma]

I was literally searching for this yesterday, spent a whole day agonising over it. Did you read my mind??

[@roxannefeyfullen2218]

same here i saw this in a medium post somewhere and was trying to figure out how it could be done.. wild

[@prielhackim]

This is what i was allways waiting for. Thanks

[@lauraisthemom80]

This is exactly what I was looking for. Thank you so much for posting this!

[@justynaUrsa]

SO excited to try out this new feature!

[@Sublimefate]

Really mind blowing, can't wait to test it!! thank you Ran you are the best.

[@karinachocronm]

So excited about this! Thanks for the help Ran :)

[@hamzalabrinssi]

Thanks, Ran. It was such a hassle dealing with JSON code embeds and JS files manually!

[@peterlum1311]

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.

[@johnleighdesigns]

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

[@vlchalwell]

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!

[@dougsirkoch]

Insane. Absolutely insane 😱

[@MrsHorridVR]

תודה לך רן על כל המדריכים המדהימים!

[@hasithashan]

Great video mate. Cheers for the info!

[@ArthurStratDesign]

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!

[@ruandesigns1158]

Mindblowing.

[@freshmindideas3222]

Beauty! Now we gonna take webflow seriously!

[@anupkaushik9370]

Thanks for this valuable trick

[@esaborioh]

The best news ever!!!! Awesome!

[@1WillyDAVID]

pretty cool bro, really useful thanks a lot!

[@mohit96mb]

NO WAY MAN!! I'M RAIDING WEBFLOW NOW!

[@justkailash]

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?

[@maddisonharder2942]

I would like to know this

[@MrENGINE24]

This will make me sign up to webflow now!!!!

[@NoyumiAo]

Wtf this is so sick!!

[@joy-lopes]

Awesome! Thank you!!

[@jackdoe1312]

Thank's Ran. Webflow is best

[@ndthinh91]

Thanks for sharing!

[@MindWaveStudiosLtd]

Love it! Can't wait to try it out on sites. =)

[@sirharjisingh]

no wayyyyy. we had to do some workarounds for www.uscnyc.com, i wish this was released months ago!

[@sergioariza7566]

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?

[@peter.dimitrov]

Man o man! Can’t wait

[@iamtommyok]

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

[@jsebastianmunch]

Tommy Howarth no unfortunately not

[@mae2309]

Wowwww.. I NEED TO GET INTO WEBFLOW ASAP... this is fukn amazing..

[@Krispy-Potato]

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.

[@tobo21m]

Hey Ran, great Video as always! But when does this Feature get released? Thanks in advance. :)

[@Webflow]

We cannot announce any dates but sometime this month!

[@tobo21m]

@@Webflow Wow thanks. Thats waaay sooner than I anticipated. You guys rock!

[@andreas_triant]

Can we use this for a google banner ad tho? :o

[@realMentorX]

awesome :: thx for that

[@giusepperusso8624]

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 :)

[@CyanCooper]

Awesome! Is there any way to create Lottie files with software other than After Effects?

[@MKBontwikkeling]

#Elementor needs this to!

[@amelieviennot5570]

is webflow compatible with wordpress plugin such as fluent form ?

[@SamirNaimi]

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?

[@joybaridilobornu]

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?

[@TheAssasin1818]

Game changer!

[@stanmuller2870]

How can I add sound effects to a button click in Webflow? Or is that not possible at this time?

[@denniszenanywhere]

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?

[@matthew9536]

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?

[@mae2309]

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..

[@itayozari6252]

Hey Ran. thanks. There is a way to transfer also vector manipulation such as 'roughen edges'?

[@justkailash]

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?

[@nickdemore4534]

how do you make the drawing animate with scroll across the full page from top to bottom though?

[@rando7678]

Is this possible with framer?

[@SioPao105]

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?

[@CarlosPrGr]

It is SVG, so the size in pixels will not matter. What does matter is the aspect ratio.

[@editin232]

Is anything like this available for wix?

[@joopg4988]

Hey, does this work for only adobe after effects ? Can it work for other alternatives such as Blender, even davinci resolve motion graphics?

[@dominicmcmahon4798]

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?

[@sadatnafis2032]

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.

[@sagedelaney2813]

Hey flux, is there any way that I can add a custom thumbnail to a KZbin video in webflow?

[@Pmauriat76]

Does this work on mobile too? New to Webflow...

[@shrikantarts302]

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.

[@JacoblBroughton]

you probably have to use different animations for different breakpoints, if one doesn’t look right.

[@Eyalh123]

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?

[@reynielcaldera1385]

Awesome!!

[@jamespilz1514]

Why would anyone put a thumbs down!

[@dhineshvm2184]

Heyyy i miss that "byeeebyeeee" Outro 😅

[@jkartz92]

Only AE or from any compositing applications?

[@wearestudiotonic]

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 👍

[@timothynjovu5559]

I went to the lemonade website I cant see this animation😩

[@raufaamir]

Amazing fast! Just wanted to know which software you are using for integrating SVG animation into webpage?

[@TheStallion1319]

what about 3d animation ?

[@mikehewat]

yes game changer :D

[@Norell88]

Wow

[@jorgfuchs6853]

whoa… awesome shit (sorry)

[@MIKE_OSCAR]

aint that some shizznitt

[@fatjay9402]

You can do the same with Elementor and Lottie ...

[@louloudiene]

How can you do this in elementor ?

[@fatjay9402]

@@louloudiene get LOTTIEFILES BODYMOVIN FOR ELEMENTOR

[@pixelgeek]

can you connect lottie files to scroll position with Elementor?

[@fatjay9402]

@@pixelgeek i think yes... but maybe you need to add some extra CSS... manualy....

[@louloudiene]

F a T J a Y thank you I will check it out