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

  Рет қаралды 75,370

Flux Academy

Flux Academy

Күн бұрын

Learn how to build Custom designed websites with Webflow:
zpr.io/tPhkU
-
Flux is proudly sponsored by Webflow, start a new account with an awesome discount:
bit.ly/FluxWebflowDiscount
-
Instagram: / ransegall
Twitter: / ransegall
-
Gear & Book Recommendations: bit.ly/2ohFOuj

Пікірлер: 103
@Caboomraider
@Caboomraider 4 жыл бұрын
Internet Explorer has left the chat
@rosscarter8913
@rosscarter8913 4 жыл бұрын
Error 404, browser not recognized!
@fabienb
@fabienb 4 жыл бұрын
That's a great addition Ran! I love Lottie since it first appeared, so this is rock'n'roll!
@Webflow
@Webflow 4 жыл бұрын
Great video, Ran! We're just as excited about this update!
@JesseMoffett
@JesseMoffett 4 жыл бұрын
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
@MrENGINE24 4 жыл бұрын
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!!!!
@mikesellrTV
@mikesellrTV 4 жыл бұрын
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.
@robertvidaure6746
@robertvidaure6746 4 жыл бұрын
Okay... NOW I'm switching from Elementor to Webflow TODAY. Game changer!
@justynaUrsa
@justynaUrsa 4 жыл бұрын
SO excited to try out this new feature!
@Raul9115
@Raul9115 4 жыл бұрын
Really mind blowing, can't wait to test it!! thank you Ran you are the best.
@Fedecki1
@Fedecki1 4 жыл бұрын
NOOOOO !!! Amazing feature can't wait to try it ! Awesome video as always !
@lauraisthemom80
@lauraisthemom80 4 жыл бұрын
This is exactly what I was looking for. Thank you so much for posting this!
@fabricepohlmann302
@fabricepohlmann302 4 жыл бұрын
Honestly this is completely insane 👏🏻👏🏻👏🏻
@karinachocronm
@karinachocronm 4 жыл бұрын
So excited about this! Thanks for the help Ran :)
@vlchalwell
@vlchalwell 4 жыл бұрын
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!
@nickjones605
@nickjones605 4 жыл бұрын
Your beard game is strong today, Ran. Thanks for the vid, as per usual.
@prielhackim
@prielhackim 4 жыл бұрын
This is what i was allways waiting for. Thanks
@MrsHorridVR
@MrsHorridVR 2 жыл бұрын
תודה לך רן על כל המדריכים המדהימים!
@hamzalabrinssi7945
@hamzalabrinssi7945 4 жыл бұрын
Thanks, Ran. It was such a hassle dealing with JSON code embeds and JS files manually!
@link5059
@link5059 4 жыл бұрын
This is such a cool feature. Been working with Lottie for a while and this will save me loads of time.
@Webflow
@Webflow 4 жыл бұрын
Yay!
@link5059
@link5059 4 жыл бұрын
Webflow when will it be live?
@peterlum1311
@peterlum1311 4 жыл бұрын
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.
@dougsirkoch
@dougsirkoch 4 жыл бұрын
Insane. Absolutely insane 😱
@johnleighdesigns
@johnleighdesigns 4 жыл бұрын
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
@nathandennis5074
@nathandennis5074 4 жыл бұрын
This is C R A Z Y! Guess I'm going to have to brush off my After Effects skills!
@gkstr11
@gkstr11 4 жыл бұрын
"brush up on my"
@anupkaushik9370
@anupkaushik9370 2 жыл бұрын
I appreciate you made a tutorial on such animation which makes website cool and trending .. This is the reason why i subscribed your channel
@hasithashan
@hasithashan 4 жыл бұрын
Great video mate. Cheers for the info!
@ruandesigns1158
@ruandesigns1158 4 жыл бұрын
Mindblowing.
@joy-lopes
@joy-lopes 2 жыл бұрын
Awesome! Thank you!!
@anupkaushik9370
@anupkaushik9370 Жыл бұрын
Thanks for this valuable trick
@tabithaemma
@tabithaemma 4 жыл бұрын
I was literally searching for this yesterday, spent a whole day agonising over it. Did you read my mind??
@roxannefeyfullen2218
@roxannefeyfullen2218 4 жыл бұрын
same here i saw this in a medium post somewhere and was trying to figure out how it could be done.. wild
@peter.dimitrov
@peter.dimitrov 4 жыл бұрын
Man o man! Can’t wait
@MrENGINE24
@MrENGINE24 4 жыл бұрын
This will make me sign up to webflow now!!!!
@jackdoe1312
@jackdoe1312 4 жыл бұрын
Thank's Ran. Webflow is best
@ndthinh91
@ndthinh91 2 жыл бұрын
Thanks for sharing!
@freshmindideas3222
@freshmindideas3222 4 жыл бұрын
Beauty! Now we gonna take webflow seriously!
@1WillyDAVID
@1WillyDAVID 3 жыл бұрын
pretty cool bro, really useful thanks a lot!
@MindWaveStudiosLtd
@MindWaveStudiosLtd 4 жыл бұрын
Love it! Can't wait to try it out on sites. =)
@esaborioh
@esaborioh 4 жыл бұрын
The best news ever!!!! Awesome!
@mohit96mb
@mohit96mb 4 жыл бұрын
NO WAY MAN!! I'M RAIDING WEBFLOW NOW!
@SamirNaimi
@SamirNaimi 4 жыл бұрын
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?
@NoyumiAo
@NoyumiAo 3 жыл бұрын
Wtf this is so sick!!
@itayozari6252
@itayozari6252 4 жыл бұрын
Hey Ran. thanks. There is a way to transfer also vector manipulation such as 'roughen edges'?
@ArthurStratDesign
@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!
@andrekremmer7104
@andrekremmer7104 3 жыл бұрын
awesome :: thx for that
@TheAssasin1818
@TheAssasin1818 4 жыл бұрын
Game changer!
@matthew9536
@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?
@sergioariza7566
@sergioariza7566 4 жыл бұрын
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?
@sirharjisingh
@sirharjisingh 4 жыл бұрын
no wayyyyy. we had to do some workarounds for www.uscnyc.com, i wish this was released months ago!
@reynielcaldera1385
@reynielcaldera1385 4 жыл бұрын
Awesome!!
@joopg4988
@joopg4988 4 жыл бұрын
Hey, does this work for only adobe after effects ? Can it work for other alternatives such as Blender, even davinci resolve motion graphics?
@mae2309
@mae2309 4 жыл бұрын
Wowwww.. I NEED TO GET INTO WEBFLOW ASAP... this is fukn amazing..
@CyanCooper
@CyanCooper 4 жыл бұрын
Awesome! Is there any way to create Lottie files with software other than After Effects?
@nickdemore4534
@nickdemore4534 3 жыл бұрын
how do you make the drawing animate with scroll across the full page from top to bottom though?
@iamtommyok
@iamtommyok 4 жыл бұрын
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
@jsebastianmunch 4 жыл бұрын
Tommy Howarth no unfortunately not
@sagedelaney2813
@sagedelaney2813 3 жыл бұрын
Hey flux, is there any way that I can add a custom thumbnail to a KZfaq video in webflow?
@giusepperusso8624
@giusepperusso8624 3 жыл бұрын
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 :)
@MKBontwikkeling
@MKBontwikkeling 4 жыл бұрын
#Elementor needs this to!
@joybaridilobornu
@joybaridilobornu 2 жыл бұрын
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?
@eyalh1267
@eyalh1267 4 жыл бұрын
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?
@mae2309
@mae2309 4 жыл бұрын
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..
@jamespilz1514
@jamespilz1514 4 жыл бұрын
Why would anyone put a thumbs down!
@SioPao105
@SioPao105 4 жыл бұрын
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
@CarlosPrGr Жыл бұрын
It is SVG, so the size in pixels will not matter. What does matter is the aspect ratio.
@Pmauriat76
@Pmauriat76 4 жыл бұрын
Does this work on mobile too? New to Webflow...
@amelieviennot5570
@amelieviennot5570 Жыл бұрын
is webflow compatible with wordpress plugin such as fluent form ?
@editin232
@editin232 4 жыл бұрын
Is anything like this available for wix?
@Krispy-Potato
@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.
@andreas_triant
@andreas_triant 2 жыл бұрын
Can we use this for a google banner ad tho? :o
@sadatnafis2032
@sadatnafis2032 4 жыл бұрын
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.
@stanmuller2870
@stanmuller2870 3 жыл бұрын
How can I add sound effects to a button click in Webflow? Or is that not possible at this time?
@justkailash
@justkailash 4 жыл бұрын
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
@maddisonharder2942 4 жыл бұрын
I would like to know this
@justkailash
@justkailash 4 жыл бұрын
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?
@shrikantarts302
@shrikantarts302 3 жыл бұрын
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
@JacoblBroughton 3 жыл бұрын
you probably have to use different animations for different breakpoints, if one doesn’t look right.
@dhineshvm2184
@dhineshvm2184 3 жыл бұрын
Heyyy i miss that "byeeebyeeee" Outro 😅
@dominicmcmahon4798
@dominicmcmahon4798 4 жыл бұрын
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?
@rando7678
@rando7678 11 ай бұрын
Is this possible with framer?
@TheStallion1319
@TheStallion1319 4 жыл бұрын
what about 3d animation ?
@tobo21m
@tobo21m 4 жыл бұрын
Hey Ran, great Video as always! But when does this Feature get released? Thanks in advance. :)
@Webflow
@Webflow 4 жыл бұрын
We cannot announce any dates but sometime this month!
@tobo21m
@tobo21m 4 жыл бұрын
@@Webflow Wow thanks. Thats waaay sooner than I anticipated. You guys rock!
@timothynjovu5559
@timothynjovu5559 4 жыл бұрын
I went to the lemonade website I cant see this animation😩
@mikehewat
@mikehewat 4 жыл бұрын
yes game changer :D
@Norell88
@Norell88 4 жыл бұрын
Wow
@jkartz92
@jkartz92 4 жыл бұрын
Only AE or from any compositing applications?
@wearestudiotonic
@wearestudiotonic 4 жыл бұрын
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 👍
@denniszenanywhere
@denniszenanywhere 2 жыл бұрын
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?
@raufaamir
@raufaamir 4 жыл бұрын
Amazing fast! Just wanted to know which software you are using for integrating SVG animation into webpage?
@Mike_Oscar
@Mike_Oscar 4 жыл бұрын
aint that some shizznitt
@jorgfuchs6853
@jorgfuchs6853 4 жыл бұрын
whoa… awesome shit (sorry)
@fatjay9402
@fatjay9402 4 жыл бұрын
You can do the same with Elementor and Lottie ...
@louloudiene
@louloudiene 4 жыл бұрын
How can you do this in elementor ?
@fatjay9402
@fatjay9402 4 жыл бұрын
@@louloudiene get LOTTIEFILES BODYMOVIN FOR ELEMENTOR
@pixelgeek
@pixelgeek 4 жыл бұрын
can you connect lottie files to scroll position with Elementor?
@fatjay9402
@fatjay9402 4 жыл бұрын
@@pixelgeek i think yes... but maybe you need to add some extra CSS... manualy....
@louloudiene
@louloudiene 4 жыл бұрын
F a T J a Y thank you I will check it out
Learn MUI (Material UI) in under 10 min!
9:06
FrontStart
Рет қаралды 124 М.
Неприятная Встреча На Мосту - Полярная звезда #shorts
00:59
Полярная звезда - Kuzey Yıldızı
Рет қаралды 7 МЛН
Vivaan  Tanya once again pranked Papa 🤣😇🤣
00:10
seema lamba
Рет қаралды 32 МЛН
I Can't Believe We Did This...
00:38
Stokes Twins
Рет қаралды 80 МЛН
Top 5 Webflow mistakes beginners make
9:25
Flux Academy
Рет қаралды 64 М.
Create Animations For The Web With LottieFiles and After Effects
11:19
School of Motion
Рет қаралды 45 М.
How to create an Animated Timeline in Webflow
13:39
Relume
Рет қаралды 70 М.
Adding Motion to Your Designs with LottieFiles
13:46
Jesse Showalter
Рет қаралды 26 М.
Easily Improve Your Web Design (With Example)
17:59
Flux Academy
Рет қаралды 27 М.
6 Webflow Micro Interactions You Can Clone Today
6:33
Arnau Ros
Рет қаралды 53 М.
2D & 3D effects and transitions in CSS - Webflow tutorial
21:06
Create Lottie Animations in After Effects - The Ultimate Guide!
39:34
How To Structure Websites Efficiently With Webflow
8:46
Flux Academy
Рет қаралды 146 М.
Неприятная Встреча На Мосту - Полярная звезда #shorts
00:59
Полярная звезда - Kuzey Yıldızı
Рет қаралды 7 МЛН