Say goodbye to the days of boring, pixelated GIFs because Lottie animations
are here to bring your designs to life. These are lightweight, scalable, and
interactive animations which can be used on all mediums, from websites and
apps to ads and social media. In fact, the animations you just
saw in this video are Lottie. Hey, everyone, my name's Adi. And in this course, I'm gonna tell
you everything you need to know to get started with Lottie animations. We'll kick things off
with a brief history, and then explore where to
find Lottie animations. From there, we'll dive into various ways
of using this new format on the web, but also in Figma prototypes. And finally, I'll show you a few ways you
can create your own custom Lottie files. So if that sounds interesting,
let's get started. This video is brought to
you by Envato Elements, the largest unlimited creative
subscription in the world. Click the link in the description
to find out more. [MUSIC] Lottie is an open source
JSON-based animation file format. It was developed back in 2017 by a group
of engineers working for Airbnb. The format is called Lottie because
it's named after Charlotte Reiniger, a German pioneer of silhouette animation. Now, there are four main reasons you
would want to use Lottie animations. Number 1, small file size. Lottie animations are tiny
compared to their counterparts. Here's the same animated
icon in two formats, GIF on the left and
Lottie JSON on the right. The GIF is 1.2 megabytes
while the Lottie is only 329 kilobytes,
making it about 70% smaller. And that's just
the unoptimized JSON format. More about that in a little bit. Reason number 2 is that Lottie
animations are infinitely scalable. That's because they're vector-based, so you can scale them to any
size without losing quality. Reason number 3,
Lottie animations are interactive. Because the animation elements
are exposed, you can manipulate them to respond to interactions like clicking,
hovering, or scrolling. Finally, the fourth reason
is multi-platform support. Lottie animations can be used pretty much
everywhere, the web, iOS, even Android. Now, where can you find
these amazing animations? Well, the main source is
probably lottiefiles.com. You can think of this like the official
library for Lottie animations. And you'll find tons of
information on this website, but you'll also find some free and
premium animations, along with a couple of tools that we'll
be discussing later in the course. So if you go to free animations,
for instance, you can see all the animations
created by the community. And some of them were, well,
most of them are actually pretty amazing. And at any point, you can also
click on a specific animation, see its name, who created that animation. And you have a couple of options that
we'll talk about later in the course. And, of course,
if you want some more premium animations, you can find some of those as well. This takes you to the account
area on lottiefiles.com. But here, yeah, you can see
some of the premium animations, and you have access to
them by subscribing or by purchasing a plan
here on a LottieFiles. There are, of course, other places on the
web where you can find Lottie animations. Just do a Google search and
I'm sure you'll find a bunch of those. I can also recommend Envato Elements. If you go to Envato Elements and,
for instance, you search for a Lottie, you'll find over 600
files that come in a Lottie format. These are placed under video templates. And you can find a lot of things
from animated illustrations like these to animated icons like these or
like these, and you'll actually see me use
some of these in this course. So lottiefiles.com and Envato Elements. These are two places I can recommend for
finding great Lottie animations. Now, when it comes to Lottie,
at some point, you'll come across these three terms, Lottie JSON, Optimized
Lottie JSON, and Optimized dotLottie. So what's the deal with them? Well, it's quite simple. They're all Lottie animations, except
some are more optimized than others. In a nutshell, Lottie JSON is
like the standard format for all Lottie animations,
while Optimized Lottie JSON and dotLottie are optimized
versions designed to improve page loading times and performance. With dotLottie offering additional
features and optimizations. To give you an idea about what that means, take a look at this loader
animation from lottiefiles.com. The standard format is
113 kilobytes in size. The Optimized JSON is 82 kilobytes,
so 26% smaller, while the dotLottie format is
just 7 kilobytes, so 93% smaller. Apart from the obvious difference in file
size, there are also slight differences when it comes to implementation,
which we'll discuss in the next lesson. And speaking of that,
let's move on to using Lottie animations. All right, so let's take a look at
a few demos that will show you how to implement these Lottie
animations in your projects. And we'll start with the web. For our first demo, I have this page
that I'm building right here and I want a cool travel related
animation that goes right here on the here area above my main title. So I went to lottiefiles.com. I searched for travel, and I found
this one that's called travel is fun. So let's see how we can
implement this in that page. The first thing you've got
to do is create an account. Then once you've created the account and
you're logged in, you would click the Download button and you would say
save to workspace to download, okay? And that's gonna open that
animation in your workspace, and this is a place on lottiefiles.com
where you can edit the animation. For example, you can go and
change the background color here. You can even change the color
palette of the animation, right? So maybe you want something like this or
like this or like this or like this. It's really up to you, or you can just
reset and use the default options. There are many more things
to play around with here. But the stuff that we're interested in
is how do we take this animation and put it in our webpage? For that, the easiest way by far is if
you go to the Handoff & Embed section, you can enable The asset link,
this is mandatory. If you are onto inbed, this animation
in your page and once that activated, you can choose the format the format
that you want to link to, so it can choose between
a lot of JSON optimized. A lot of JSON dotLottie and optimized, and you can see the size difference for
these elements here. Obviously, we wanna go for
the smallest file size possible, so let's go for optimized dotLottie. And then all you got to do is
copy this code from here and pasting it in your page. Let's open up VS Code, this is where
I have the code for the page and instead of animation goes
here I can simply do this. Now, this has two parts. We have a script that basically
loads the dotLottie player from an external repository, and
then we're creating a dotLottie player custom HTML element
that's linking to our animation. And by using these attributes
here we can change the animation background,
the speed, the size of it. And we can also specify whether or
not to loop the animation, so play it over and over again and
should it autoplay or not on page load. So I'm just gonna leave this by default,
save, and then I'm gonna go back to my page and just like that I have an animation
playing exactly where I want it. Do I wanna make it bigger? Sure, I can change this,
let's say to 640 pixels. You can leave in
the height if you want to. I'm gonna delete that, and
maybe that's a little bit too big, so maybe go with 480 pixels just like that. So I'm quite happy with that result. And that's it, that's super, super easy. Now, if you wanna make changes to
this animation, you can go in here, you can maybe change the color palette,
and you can save that, all right? You can save the changes to this
animation that you're linking to, but you would need a premium account for that. Or you can save it as a new animation and
then link it again in your page here. And so that's the easiest way you can
embed a Lottie animation in a web page. Now for demo number 2,
we're looking at a very simple page, where I want to add some icons
above these feature titles, okay? So I went to an Envato Elements and
I got this animated icon set, which includes icons in a Lottie format. If you wanna check this out, you'll
find a link in the video description. And I got three of the icons, and
I'll just show them to you really quick. This is called communication,
security and transfer. Obviously, these are JSON formats, so
we cannot preview them in VS Code, but you will see them live
in just a little bit. So let's see how we can
load these in our webpage. Obviously these are not
from Lottiefiles.com, so we cannot embed them like we
did in the previous example. So for that, if we're getting
icons from somewhere else, we can use a JS library
called body move-in. This it's called just like, it's called
just like the after effects plugin used to create loading
animations in the first place. But yeah, you can go to
cdnjs.com/library/bodymoving. You can grab this script tag from here. You can paste it, let's say, just
before the end of the body tag like so, and then you would write a script
yourself that looks something like this. You would create a variable,
you can call it whatever you want, and you'll say lottie.loadAnimation, and
you would pass in a couple of parameters. First of all, the container, so
where do you want to place that animation? In my case,
it's a div with an id of icon-1. So we're gonna say
document.getElementById(icon-1). Then, you would specify the renderers, so render as what exactly on
the Canvas in the HTML as SVG. Personally, I'm gonna go for SVG. Do you want it to loop or not? I'm gonna set a loop to true. I also want this to autoplay on page load. And finally, you can specify a path,
so where are you loading the icon from, mine is in
a folder called Images slash, and I'm gonna load transfers.json,
which is this one right here. So we save that, and
now when we go back to our page, we can see the icon really nicely there. It's already animated, it looks great
because I added some CSS beforehand, where I just set a width and
a height to the icon class. Pretty easy, right? So now I can create the other two icons. So animations 2 and 3, let's target
the corresponding elements in the DOM. This is gonna be communication,
and this is gonna be security. So my other two icons, and that's it. That's how easy it is to load these
loading animations in a web page. Now, doing it this way
gives you a lot of control because later on you can
target this An M1 or an M2 object and
do all sorts of stuff with it. You can play the animation, you can
pause the animation, you basically have access to the entire Lottie animation and
you can do some crazy stuff with it. So you definitely have more control
by doing this, than the previous version where you just embedded
the animations from lottiefiles.com. Now, if you don't want to
write any kind of JavaScript, there is another way although it doesn't
give you the same amount of control. You can add the Lottie
class to the container where you want to load each icon. And then you would set some custom data
attributes, so you don't actually need the Ids for this approach, but
I'm gonna leave them in anyway. So you would set data, animation path, that's gonna be equal to
images/ what was the first one? Transfers.json. And then you'll do the same for
the other two. This one is communication,
and this one is security. Great, safe, and there we have it. Same thing, just a different way
of loading these animations. As I said this doesn't give you
the same amount of control, but if you don't want to write JavaScript,
then you have this option. There are also two data attributes
that you can add here, one is for loop and one is for autoplay,
if I'm not mistaken. But in a nutshell, this is how you
would load those logging icons or whatever animation you have by using
the body moving JavaScript plugin. And now if you're a Webflow user,
then you'll be super happy to hear that Webflow supports, lots of animations,
but By default, so you don't need to add any kind of
external libraries, they just work. So let me show you a quick demo of that. So, I recreated the page you just saw here
in Webflow, and I wanna do the same thing, add those Lottie animations right
here above the heading threes. So, how do we do that? Well, I've already loaded
those assets right here, the JSON files, and
all I got to do is click and drag. And I wanna make sure that these are set
to loop so they keep going and going. And let's do the same for the other one, I believe it was the communications,
like so, make that loop as well. And I'm also going to choose SVG as
the render here, and then the, oops, I didn't mean to do that,
just this one, bring that in. Of course, it's much faster to do this
in Webflow because it's an amazing tool, so let's just select one of these and
change its size to maybe 128 pixels. So, we can actually give it a class,
let's call this custom Lottie, and let's apply it to the other
Lottie animations as well, like so. So now when we preview the page,
you'll see the animations are nicely playing, they're scalable,
they're very crisp. And as I said, you don't need to
load any kind of external libraries in Webflow because it's already
got that covered for you. Now, before we wrap up this lesson, I wanna quickly go over some of the Lottie
integrations you might not expect. So, if you go to
the lottiefiles.com/integrations page, you'll see all of
the available plugins and all the available places where
you can add Lottie files. And you saw one just here as I scroll
down there is a Canva plugin, so if you're a Canva user, you can add free, ready to use Lottie animation
in your Canva projects. And as you scroll down you'll find all
the places where you can embed and implement these Lottie animations. For example, you can add them to Figma,
I just mentioned the Canva. You can even add them in
Apple Vision Pro projects, right? Apple Vision Pro, in case you don't know,
it's that VR headset from Apple. You can add them to Framer,
to Wix, to Sketch even. You can embed them even in
productivity tools like Notion. And also if you're using
no code tools like Webflow, yeah, I just showed you how to use them,
but you can also add Lottie animations
to WordPress, and even to Elementor. So, a lot of different options,
go ahead and study this page to find out exactly where you can
implement these Lottie animations. Now, if you browsed the integration
list that I just showed you, you might have seen Figma, Sketch and some
other design tools being featured there. Well, as a longtime Figma user,
I'm super happy that we can include Lottie animations in Figma prototype, so let
me give you a quick sneak peek of that. So, in Figma, I have the same page
that I showed you earlier, and let's say I wanna add those three icons,
right? Well, by default Figma doesn't
support the JSON format, right? So, we need to use a plugin for that. And the easiest one to use is
just the LottieFiles plugin. So, you need to open that,
and you go to Import. So, I'm gonna select these
three JSON files, and while we cannot add the JSON file as a Lottie
animation, we can insert it as a GIF. So, let's do that, you can choose
the size, in my case, let's do small, make sure transparency checked, and
then I'm gonna insert the GIF, okay? So I'm gonna take that and
just place it wherever I need right here. And then we can do the same for
the other icons. Apparently, you can just do one at a time,
so let's do security. Let's insert that as a GIF as well,
let's place it there. And let's do one more time,
let's do communication, insert that as a GIF, okay, take that. Now, you can close the plugin,
and if you go to the prototype, you will see that the animations
are now loaded as animated GIFs. I'm sure that in a future Figma
update we'll be able to include JSON Lottie animations,
which are obviously much better than GIF files because they're scalable,
you can interact with them. But for now, you can load Lottie
animations in Figma prototypes, you just need to convert
them to a GIF first. All right, and these are just a few ways
you can integrate Lottie animations in your project. Now, covering every single use case for
this is obviously beyond the scope of this course, so, I'll
leave that up to your individual needs. The integration page I showed
you earlier should give you all the necessary information. With that said, let's move on to the
fourth and final lesson of this course, where I'll show you how to
create custom Lottie animations. Design adventures can be tricky,
especially when you're on the hunt for device mockups, icons, and whatnot. So, if you're looking for a place where
you can find this stuff really easy, I recommend Envato Elements. Recently I was working
on a website design, and this feature section needed to show
an image of the client's app, and it's a Mac app, so I wanted to present
it in a special, meaningful way. So, I found this Apple Pro Display
mockup on Envato Elements. After importing it to Figma,
I changed the image, then copied the whole thing in my project,
adjusted the size and positioning, and I was done,
very simple, very fast. So, check out Envato Elements for
all sorts of digital assets, you need one subscription or
unlimited downloads. For more info, check out the links
in the video description. [MUSIC] Now, let's face it,
at some point you'll want to design and create your own custom animations. Maybe you have a client that
has a very specific request, or you just can't find the right
animation for your project. Well, there are several ways you can
create custom Lottie animations, so let me show you a couple of them. Traditionally, Lottie animations
are created in Adobe After Effects, that's how it all started. After the animation is
created in After Effects, it's exported to JSON using
a free plugin called body moving. You've heard about it in a previous
lesson where we use the JavaScript plugin called Body Move-in to load
those Lottie icons in our webpage. Now, I'm not gonna show you that because I
don't know how to work in After Effects, so I'll leave it up to the pros,
plus Adobe After Effects. This is a paid software so
not everyone has access to it. Therefore, let's look at other ways we
can create custom Lottie animations. Let's say I found this icon
set on Envato Elements, and I wanna use one of these icons in
a project and I wanna animate it, right? So I downloaded this and
in Figma, I copied this map icon, which looks something like this. Now, the easiest way to
create a Lottie animation out of this static file is to
use the Lottie files Plugin. So let's open that up. So you would select the icon frame, and
then you would simply export to Lottie. And here you have several
different options. You can choose from
some presets like this, which will animate all of
the layers inside a parent frame. So you can rotate them,
you can pulse them like this. You can do a path drawing like so. You also have some options here like
sliding up or sliding down fading in. But I think probably something like this
would work for me, or maybe this one. Yeah, I think this one would do just fine. And inside the Figma plugin,
you also have some customization options. You can choose how many frames
you want this to animate over, which basically gives you
the duration of the animation. You can do a start delay and end delay. For example, if I put 10 here,
it's gonna use 10 frames as a delay or
start 25 for the end here. And you can choose how you want
to animate each individual layer. So sequential, meaning,
one after the other or parallel, which animates them all at the same time,
obviously the results are quite different. So, once you're done,
creating your animation like this, you can either create
a GIF file out of it or you can save it to your
workspace on Lottiefiles.com. And from there,
you can implement it wherever you like. Now, this is the easiest way to
create a Lottie animation in Figma, but there are other ways as well. So let's quickly close this. Let's say I want a little bit
more manual control over how my animation would look like. So I can actually create the individual
stages of the animation. So here's how you do that. Let's actually duplicate
this frame two times, and let's make some changes to
the middle frame, right? Let's move these elements around,
maybe rotate this a little bit. Maybe, why not make it
a little bit bigger like so? And maybe move this icon down,
what else can we do? We can make this a little bit bigger,
move this down, make this a little bit smaller,
maybe make this a little bit bigger. So the idea is we make whatever changes we want to the intermediate
stages of the animation. So once I'm happy with the changes
I can go to, well, maybe. Just a few more for good measure. Once I'm happy, I can go to prototype. Yeah, I can create a flow
starting point for our prototype. And then I can start adding interactions,
right? So I want this to start right away. So let's add a one millisecond delay, and
I want to navigate to the second frame and I want this is important,
I want to animate them over smart animate. And let's do like a one
second animation duration. So let's do the same for frame two. Now we go to frame three. Again with smart animate
the exact same thing. So now if we preview this,
it looks something like this, right? And then from frame three we can
circle back to frame one and do exactly the same thing which
looks something like this, of course it just keeps on going back and
forth. So with the prototype created,
let's open up the plugin. And here instead of selecting
the frames that you want to animate, you can select the prototype flow. And you can see the animation
preview right here, and the plugin. And after this you can either inserted as
a GIF or Save it to your workspace and Lottie files and from there,
you can do whatever you want with it. You can embed it in your web project. You can use it in your iOS app,
your Android app wherever you want. But those are two ways you can
create a Lottie animation using the LottieFiles Figma plugin. Now you might be familiar with
SVGator that's an online tool you can use to animate SVGs and
recently they introduced support for Lottie animations which means we can
import but also export Lottie files. Let me show you a quick demo. So you would go to SVGator.com
you would create an account, and that's gonna take you to their app. So let me actually open one of
their demo projects here and show you what it's all about. You can basically create all
sorts of shapes within here. You can also import Lottie files
if you go to library, right? You can upload assets, but
you would have to upgrade to a paid plan. In my case, I'm just gonna use
this demo to you to demonstrate, which currently looks something like this,
right? It morphs these two shapes basically,
the outer shape and the inner shape and it also changes
the color of the outer shape. And it's pretty self-explanatory here,
we have the morphing shape, which is the middle one, and
I'm creating an animation for morph. And then I have the ellipse,
which is the outer shape. I'm changing the morph or
I'm animating the morph in the fill color. And if I want to animate something else, let's say I wanna add a border
to this ellipse, right? I can go in here to the right side in
the panel here, and I can add a stroke. Let's say I wanna add a red stroke just so
we can see it. And let's make that a little bit
more obvious, something like that. I meant to do it here like so. Okay, so let's place the cursor
to the beginning and let's click on animate here and
I'm gonna animate this stroke color. Okay?
That created a key frame, so now let's move our play head here, where we wanna create the next
key frame in the animation. And here, let's set the stroke
color to let's say dark blue. And finally, let's move it all the way
to the end and let's add another key frame where I'm gonna change this
to maybe, I don't know, this orange. Okay, so now if we play it back,
you'll see that Stroke color also change
along with the other stuff. And of course,
once you're happy with the animation, you can go to Export, where you have
the usual options, but now in beta. So be careful, this is a beta option. You can download as Lottie JSON. And if you're on a paid plan with SVGator, you can also choose to download
an optimized JSON file. But take this with a grain of salt. As I said, this is a beta, so
it might not work as expected. The import might not work as expected
at the time of this recording. Maybe if you're watching this a year
later, everything is fine and dandy. But for now, just be cautious. So that's SVGator. Last but not least,
Lottie animations can be created with some of the tools
available at lottifiles.com. So let me show you two of those. The first one is called SVG to Lotti, and you can find it under Integrations,
SVG to lotti. Basically, what this allows you to do is
upload an SVG file and then animate it. So, I'm gonna be animating this
Moos logo from Envato Elements. I have that as an SVG, so
I'm simply gonna drag and drop it here. And from here, you just select
one of these presets, right? Personally, I'm a big fan of
this one that draws the shape so you can go with this or maybe this. But I think this one is the right one for
me. So once I'm happy with the result,
I just save it to the workspace. And from there, yeah,
I can download it as a JSON file. I can change its color palette, do all sorts of things
from the Lottiefiles app. So that's the first tool,
SVG to Lottie, very, very handy. If you want something really quick and if you're happy with one of these presets,
then go for it. Now, if you want something
a little bit more capable, then you would go to Lottie Creator. And for that, you would go to Products,
Lottie Creator, and you would launch it. Just a word of caution first, this is
also in beta at the time this recording. So not all features
might work as expected. For instance, this Lottie Creator
has a cool feature called AI Prompt to Vector,
which currently doesn't work. But it's something really cool. You just enter a prompt like you would
do in Chatgpt or Midjourney, and it's gonna generate a vector for you. And then you can do whatever
you want with that vector. But the nice thing about Lottie Creator
is, if you go to the Discover tab, it gives you some pre-made animations
that you can use and build your own. So, for example, I can choose this simple
thumbnail and I can preview it like so. Okay, you can change
the duration of the animation. Let's say I want this to be like
three seconds, maybe 60 FPS. I can also change the dimension
of the canvas this is running on. And if you wanna add something extra,
you can search for animations. Let's say, let's search for sparkle. And you can add a sparkle effect. You can preview it here and you can add it to your animation here and
you can preview it. And you can move it. Let's say you want the sparkle
to come in right about here, right, you can change its position. And if you want, you can edit that
separately by going to the Animation tab. And you can play around with these. You can maybe take some of these and
delete them altogether. It's really up to you how
you control this animation. And as I said, it's still in beta. So some of these features might
not work as they should, but maybe by the time you see this video,
all of the problems might be fixed. And you can even create certain
elements yourself, right? You have an option here for shape tools,
where you can create a rectangle, ellipse, polygon, stars, and
you can animate those however you want. So you can add a rectangle here, right? You can change its appearance here,
its color, its size, and then you can click on these and
animate its various properties, like the position, scale,
opacity, and so on and so forth. The idea is once you are happy
with your animation, you would go to Export, and
that's gonna create it in your workspace, where you can save it,
you can give it a name. And from the workspace, well,
by now you should know what to do with it. And that's a quick introduction
to Lottie animations. I hope you found this video useful. And I have a question for you. How are you planning on using
Lottie animations in your projects? Is it an animated illustration, icon, logo, let us know down in the comments. As always, don't forget to check out
the Envato Tuts+ Youtube channel for more content like this, but also to
learn about web design, web development, and much more. It's all free, so make sure to
also hit that Subscribe button and give this video a thumbs
up if you liked it. I'm Adi.
Thank you very much for watching. And until next time, take care. [MUSIC]
