When to use Lottie or Native animations

[Music] hey everybody welcome back today we're going to take a look at lottie animations and native animations i'm going to show you a few examples and talk through when is a good idea to use lottie versus using native animations let's dive in so on this site a lot of animations are being used as a way to add a little bit more excitement to the page kind of visualizing what is happening for the specific product and the things that they're advertising here and so you can see they're being used in very simple ways just as a reinforcement of the hero content and the title content and so it's really just a subtle simple animation here of this uh stopwatch and then when you scroll down that animation morphs to this animation that you see here so the way this is actually built is two separate lottie files and it looks seamless because the second animation starts where the first animation ends and so when i click this it picks up from where that first animation stopped and continues to this end point but if we go ahead and scroll back up you can see that the end point of that lottie animation is just their static and if i go back down the end point of this animation is also static this could also be a single lottie file animation that just goes from the beginning to the middle point pauses and from the middle point to the end point and pauses and you could actually add in here if you go back up to the top it animates in reverse to kind of get to this point and then when you go forward it then animates forward to get to this point that way of implementing it your user actually has a chance to see that animation multiple times during a single session which sometimes adds a little bit more of excitement and dynamics to the experience this next example is from sos international and it's a really awesome example of scroll based lottie animations and so all of these animations are super super subtle they're really just line tracings happening on screen as you're scrolling through and so as i'm scrolling things are moving over um the actual moving of the position of the elements could potentially be done with css animations and the actual line trace is what contains the lobby animation because you can see some of the text is also moving in and out as you're going as well as the illustrations on the left and right side and so it's a nice combination of some css animations with what lottie is already bringing to the table and it's a very subtle way very powerful way to use lottie to add a little bit of excitement to the experience and what's nice about this is that when i scroll back up all the animations are still happening because they're all based off of my scroll position through the page and so i'm able to experience that again and again as i navigate back and forth through this experience and here's another example where lottie would start to fall apart so this specific example here was not created with lottie but essentially when you pause on the screen it rotates on its own and as i scroll it then speeds up that rotation you could achieve something very close to this with lottie but it would take a little bit of javascript to make it feel fluid and seamless and all those sorts of things however you can see how many dots are on this specific animation that would be a lot for your browser or a mobile device to render natively because lottie is rendering native svg animations on your device and so that takes resources from your device and so the more shape layers and paths and fills and all those sorts of things that you have going on the more resources that that would take and so something like this could be built using some javascript frameworks or actually just like a 3d model that you're rendering in the background that you're just rotating around depending on the scroll location you can also use lottie animations in an interactive way so here the animation plays when the mouse hovers and reverses when the mouse leaves the icon and this is a really awesome way to keep your hover interactions really engaging and delightful throughout your experience so where lottie starts to meet its limitations are when we start dealing with ui based animations and and transitions really and so just for a simple example here in google drive if we click this new button you see that we have this animated drop down you would never see an animated drop down like this be a lottie file because there's a lot of interactivity built into this a lot of dynamic things that may happen with this specific drop down maybe we'll we will add another menu item maybe we're going to do an additional drop down you technically could create like a little micro interaction animation that animates this drop down but you wouldn't be able to do hover states you wouldn't be able to add on to it you would have to always go back to that after effects project and export a new lottie animation and all those sorts of things and it begins to become a very messy workflow and you just run into all of these different limitations and so this type of animation and interaction is implemented using native animation techniques and so using css animations using javascripts for triggers and things like that and that's what you see typically in a web environment like this here's another example in google calendar and so if we go here and we actually like create this thing here like this is animation in a way because we're dragging we're seeing things move on screen but you would never see this be created with a lotty type of animation this is all native javascript css and if we go from week to week we see there's like a subtle fade transition going from week to week this is also we're dealing with css more native based animations and so where lottie really excels is when we're combining a lot of these native animations and interactions with some delightful lottie based animations and so we could have all of these icons maybe when we click on it it animates in a certain way that would be a little bit too difficult to do and too high of a level of effort to do natively but you could swap this icon out with just a lotty animation where maybe i hover over it and it like moves a little bit and if i click on it it like morphs to a search bar and then we're we're merging some native animations with lottie animations and really creating delightful experiences here i've talked a lot about web animation specifically but now let's look at some app-based interactions and animations so while caveat dribble is amazing for inspiration but there are some things that you'll find here that have just been created for prototyping or just like to get some concepts out there but they're not really in production and so sometimes it's hard to see how viable a interaction or an animation actually is and so i try to pick out a few that seem more realistic to actually make it into a production type of environment this is a great example of some native interactions and animations what you're seeing here of like the drawer coming up going into this specific tile none of that would be created as a self-contained lobby file because there's too much going on there's a lot of interactivity there's a lot of data that you're having to pull in you're going from one scene to another scene and all of that can't be contained within a lot of file on its own however you could pair this with some lottie animation so like the x button could be a little micro animation some of these icons below could have little animations when you tap on them and so like i said before this is really where lottie really excels being paired with some native animations and interactions and here's another example where we have a lot of transitions happening you're going from one scene or screen to the next screen and you're pulling through some different information and in this this would rely fully on native animations of how do you animate what is currently in view off so that you can bring in what will be in view for the next screen seamless transitions like this look amazing but technically they're actually pretty difficult to execute because you're going from one screen to the next and what was on the first screen doesn't exist on the second screen and so how do you actually seamlessly transition between the two and so some techniques like match cutting and things like that help you trick the eye into a seamless transition even when there isn't one but again here if we were to put in some lottie animations for like some of these small moments it would really help elevate the experience and here's another example of a lot of native based animations and interactions and so we're going into this tile from a carousel and then we're trying to pair it with our specific apple watch where this little animation right here could easily be a lotty animation and so you see like the pairing of some native interactions and animations to make seamless transitions but then we can add in some little animations that maybe we handle in a lottie type of workflow to reduce the level of effort and to get a higher quality animation uh into the actual device so we just saw a lot of great examples of lottie based animations and native based animations and interactions and hopefully you're starting to see the differences between the twos and the strengths and the weaknesses of lottie versus native animations and where native animations and lottie animations really come together to create really exciting and beautiful experiences for your users catch you guys next time

Channel: Motion UX

Views: 1,841

Keywords: Ux, Motion, Ux motion, Design, Adobe, After effects, Lottie, Microanimations, Tutorial, Ui, Animation, Airbnb, Production, Experience design, Workflow, Tips, AEUX, Lottiefiles, ux animation, figma, import, designs, ui ux, how to, motion designer, microinteractions, sketching, ipad, apple pencil, lofi, fundimentals, problem solving, thinking, workflows

Id: LRa8QbCwsWc

Length: 9min 6sec (546 seconds)

Published: Sat Nov 27 2021