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

on today's episode I want to share one of the most exciting features webflow is coming out with and that is the ability to take animations from After Effects implement them in your website super super fast let's dive into it hey everybody what's up and welcome to another web flow weekly where I'm sharing tips and tutorials about making beautiful website with web flow today so excited about this new feature it's called a load a integration I'll dive deep into what is that in a second but this is just mind-blowing the ability to take vector animations straight out of After Effects and implement them so easily in your website this is going to be a real real game-changer and I before that used to take so much effort to do that now it's just so simple so what is this what is this loading integration so before if you wanted to take a vector animation to create SVG animation and not hand code all the animation yourself you had to use something called Lodi integration Lodi is kind of a plug-in or a code base that was in developed in Airbnb so they can use SVG animation and it's based upon a free plugin for after effect called body moving which just exports the after-effects animation as a vector if this is too technical you'll see how simple it is in just a second and you won't have to understand anything technical at all so let's just jump right into it so here's a website done by lemonade really cool company always coming up with a great design and this website you can see that this kind of a line Scrolls with you as you scroll along really really nice design and intricate and one of my friends asked me how do you do that how can you do that and now this is going to be so simple to build we're gonna build this in like five minutes so obviously it creates a lot of time to create the interaction but I'll show you how simple it is to build something like that so here here's aftereffect and I've created here a small animation that looks something like that and the way that we're gonna do this there's actually a background here it looks something like this I just don't want to render out the background so here I have installed the body moving and it's a free plugin that you can install in your After Effects obviously it works on vector animation not on I guess video or something like that so now that we have it we actually choose just which composition we want to export I'll just expert this one so let me just render it and the output that's done the output is a file is that's a file it's called JSON file so as you can see it here on my background on my desktop it's called data doc Jason and it's a 6k that's whole that's the whole animation that's crazy so let's jump right into web flow so I've built here a website really simple I just gave the background a little color and I put a grid here with some textures so I have something to scroll along and I want to bring in the animation into this so very soon you'll all be seeing here in the media this Lahti animation here right now it's in bed I think it's coming up in like a few days or weeks very soon you're all gonna have this and this is amazing so basically we're just gonna upload and I did this before so let me just down delete this we're just gonna upload this data Jason here and you might be able to see I don't know it's too tiny but you'll be able to see it playing here now I can just drag this into the canvas or just drag this kind of loading media but let me just drag this whole thing here into the background so right now we just have it as you can see we can see it we can scroll sits here on the top if I click this Settings here I can even play this animation you can see it plays in the background and basically that's it right now it's it's in our website if I'll do a preview we have this animation right it plays I can scroll down and it's really nice but we want to make it smarter than this right so we want to have it first of all fix in the background so we have the text overlay on top of we wanted to be connected to the scroll position so that you know when we're beginning this line and miss circle are gonna move together with the mouse so basically if you think about this theoretically what we want to have is at the top of the page the first frame of the video and at the end of the page the last frame of the video this is basically how it's going to work first of all let's though make sure that this is fixed in the background so let me just call this animation fix I just want to change the position here to fixed position to make sure that no matter where I scroll this stays up in this position obviously the layout is not perfect but it's just a demonstration so now that we have it fixed and I'll do something like that index to so the text is always on top of it I'll just go here into the interaction now webflow made it really really simple to trigger the animation based on any normal interaction so you can trigger the animation based on a click or a hover but in this case what we want to do is to trigger it based on wild page is scrolling so let me add that animation and create a new scroll animation let's call it scroll animation obviously and then since this one has chosen if I'm going to add what property do I want to animate so instead of moving it I'll have a new property here that's called Lahti so let me pick that up and as you can see we have it at scroll position zero and scroll position 100 at scroll position zero I want the frame to be actually zero and this is basically set up already but a scroll position 100 I'll just bring it to the last frame frame 100 or 100 percent it's actually framed 169 and basically we're done huh so if I'll just preview here and I'll scroll you can see that it just works so and at the beginning its frame number zero or frame and at the end a hundred percent scroll so that's it that was that simple and as you can see when I scroll up it plays we're in Reverse when I stop it stops so it's completely connected to my scroll position and it was done in like let me see 6 minutes 47 and with me talking so much so he basically took like 30 seconds right so this is incredible I've already used this Lahti animation on client website and it's been so simple and it you know improves the quality of your of your website when you're adding these tiny little vector animation and then there's a small little touches it really adds a ton to your website makes it more premium makes it more unique and I honestly I don't know any other way to integrate SVG animations so easily enter your website so this is just like mind-blowing and I think like literally for this feature alone it's worth getting into web flow and building your website with web flow so that's it I hope that was useful for you I hope you got excited about this and I'm looking forward to see what you're gonna build using this feature if you want to learn more about how to build websites with web flow you're welcome to check in my web flow master class at the link below now I'll see you on the next video you

Channel: Flux

Views: 47,603

Keywords: design, freelance, tel aviv, ran segall, ran segal, רן סגל, work, life, vlog, startups, adding after-effects animation to your webflow website, lottie, integration, webflow, after effects, adobe, interactions, animation, website, page scrolling, ui, ux, flux

Id: Ghr_7ekykG0

Length: 7min 56sec (476 seconds)

Published: Tue Sep 03 2019