Up next in 10
NEW_ Next-level Custom Animations in Canva _ LottieFiles
1K views
Jan 14, 2024
This video likely explores the next-level custom animations in Canva, specifically through integration with LottieFiles. It may showcase the features and capabilities of LottieFiles, emphasizing how users can enhance their animations within the Canva platform. The video aims to inform and guide Canva users on leveraging LottieFiles for creating sophisticated and customized animations, taking their design projects to the next level.
View Video Transcript
0:00
Have you ever come across an animated element in combat that you really like
0:04
But the colors don't match your design and there is no way to change those colors
0:10
I know that can be very frustrating. Well, there is a new Canva app called Lotifiles that solved this problem
0:19
and in this video I'm going to show you step by step how to use it
0:22
With Lotifiles you can use over 100,000 free animations and easily change their colors to match your brain
0:29
brand or any of your designs all right within Canva. And you can use as many sitting
0:35
animations as you want as often as you want and there are no daily or monthly limits
0:42
And that's not it. You can also edit the animations and share them with others. You are going to
0:48
love this. And by the way, Lottifiles is sponsoring this video but I promise I'll give you my honest
0:53
opinion on the app. Before I show you how the Lottifiles app works, let's talk about
0:59
about what a loti file is and why is it different? A loti animation is a special kind of animation made entirely with code
1:12
Like what you see here, this is actually an animation file. This code contains all the information about the shapes, colors, and movements used in the animation
1:23
And what makes these files special is that they are very small in size
1:28
Imagine the size of a PNG file being as big as a T-Rex and a G-file being as big as an elephant
1:35
so a lotie file is more like the size of a puppy
1:40
Something else that makes this file special is that despite being so small
1:45
they still look very good and they maintain the high quality and definition
1:49
And you can use these animations in various designs like animated social media posts
1:55
videos, presentations, whiteboards and more. Now let me show you step by step how this app works
2:05
This app can be used from mobile but also from desktop. And the desktop version is the one recommended for the best experience
2:13
I'm going to show you how to use it from a desktop. So go to your browser and open canvad.com
2:19
From the homepage there are two different ways to access the app
2:22
The first one is using the panel on the left. left click apps and then from here if you don't see loti files on this page search for it so you're
2:31
going to type loti files this is the app you will need so click on the app and then you have the option
2:39
to open the app in an existing design or a new design let me show you now the second way to access
2:46
the app i'm going back to the home page from here you can open any of your designs or create a new one
2:52
I'm going to create a new document and then once you are in the editor you're going to do the
2:58
same steps. So go to apps and search for lottifiles. You will see the lottifiles icon here so
3:04
click on it and you will see that the app will open automatically on a new window. You can start
3:09
using these lottie files on a blank page like the one we see right now or you can use them on any
3:15
design. I'm going to add a template so I'm going to go to design and search for special tic
3:22
coffee. I'm going to add one of these templates. Next I'm going to lotifies and I'm going to
3:29
show you how the app works at the same time as I start adding animations to this design. On the
3:35
lottifiles app we have three different sections. We have the discover tab. We have workspaces
3:42
that I'm going to show you later how it works and then we have the import section where you can
3:47
upload lotifiles to canva. Let's see first what can we do in the
3:52
discover tab. From here we will see a list of different elements animated elements that we can use
3:59
These are lotifiles and you can filter them by featured, popular or recent. You can also use this
4:08
color palette to change the colors on the elements so pay attention to the colors that we see
4:14
at the moment and then let's see what happens when I select this green and blue color palette. You can see that all
4:22
All these elements now have the colors on the color palette that I selected
4:27
Let's use this time the red color palettes. And you can see that all of the colors from these animations have changed
4:36
You can also use the custom palettes. So you can add here a new color palette and you can add your own hex codes in here or create
4:45
your own colors by using this menu right here. Okay, we have a little problem here
4:52
I lost connection to the application somehow. So what I need to do to come back to the app
4:59
is to reload the page, go back to Latifiles, and start over again
5:04
So I was under the recent results. And I was telling you that you can create new color palettes
5:11
by entering your hex code or create your own colors. You can add up to five colors on each color palette
5:19
and you can create multiple color palettes. If you don't quite like the color combination that you created
5:25
you can always go back to the original colors by clicking reset
5:30
Now, I want to add some animated elements to my design right here
5:35
So let's search for coffee and see what do we find in here
5:39
We had a lot of cute animations. So let me see what else do we have in here
5:45
I think I'm going to search for coffee bean or coffee beans
5:51
Okay, I think I'm going to add this animation right here. So you're going to select the lot of file you want to add
5:58
which is going to open this window with extra settings. So from here you can preview one more time your animation
6:06
You can change the colors if you want, but after you insert this element to your design
6:12
you will be able to change the colors as well. Okay I think I ready to insert my design So I going to click on Add to Design And that it I already have my Lotifile animation in here
6:25
And as you can see, we have the color option activated. So if I want to change the color of this animation to an orange color, I can select the color option
6:37
and then select the orange. I'm going to remove this element behind and leave my coffee beans instead
6:44
I want to add a little bit more of movement to my design
6:49
So I'm going to try to find some checkboxes. So let me try checkbox and see what do we have in here
6:57
I want to add an element that has movement, but that is not too much
7:03
So I think this one can work. I'm going to click on the element
7:07
I like that the animation is not all over the top and then add to design
7:13
Okay, I have already here my animation. I'm going to reduce its size
7:20
And then change the color to the blue that we already have in the design
7:25
Okay, I'm deleting the element that we had in the design before
7:29
And I'm going to start duplicating the animation on the position of the other checkboxes
7:34
And now let me go to position, tie the app. And that's it
7:38
That's how quickly you can transform a static design into, to an animated one with Looty files
7:46
Something to have into consideration that I believe is very important is that at the moment
7:53
when I'm filming this tutorial, the custom color palettes will not be saved
7:58
So if you have created your color palettes, you can use them to change the colors on certain
8:04
elements, you will insert those elements into your design. But if the app reloads or gets closed and open again
8:13
these color palettes will disappear. But I don't want you to get sad because I already discussed this with Lottie files
8:21
and they told me that they are currently working on a new version of the app
8:26
for us to be able to save our own color palettes in the app
8:30
So it may happen that this update already appears on your end when you see this video
8:37
So this is just for you to keep an eye on it. Maybe this is already solved
8:43
Another easy way to use your custom color palettes on these animations is by inserting the loti file into your design and then using the color option
8:53
If you have already set your custom color palettes in Canva, you will be able to access them from here
9:01
Something really interesting about this lottifiles app is that you can use as many elements as you want from this library and also from your workspaces
9:13
you can use them as often as you like because they don't have any daily or monthly limits
9:19
Also the lotifies that you use from the public library are distributed under the Lottie simple license that you see on the screen
9:27
and these lottifiles can be used for personal and commercial purposes. If you want to learn more, you can read this page that I'm leaving you here on the screen
9:37
Okay, I think we already know how to use the Discover tab
9:42
tab you will see all of your lottie files library in here but what about the workspaces we don't have anything
9:52
going on in here but this is because you will need first to connect your lottifiles account to
9:59
canva you will do it by simply clicking connect you will click connect again this will open this lottifiles
10:07
logging page so from here if you don't have a lottie files account yet
10:12
you can create one by clicking on this link and then fill out the form and click create account
10:18
i have created my new account and this took me back again to canva so now that i have an
10:25
account i simply need to connect again clicking here connect now my lotifiles has been connected
10:31
to canva but we don't see anything under workspaces and this is because we need to set
10:37
the map beforehand so we need to go to notifiles.com On the Lotifiles homepage, you're going to find the go-to dashboard button
10:47
Click here. When you open your dashboard for the first time, you will see this little window that
10:52
ask you what is your current professional role. So you can select any of these options
10:58
I'm going to go for designer, updates. And now from here, you can either watch this video, which I do recommend, or you can skip it
11:06
I'm going to click skip just to show you a couple of things about the dashboard and continue
11:11
with this tutorial. Here, by default, you will see that you have a free workspace already created for you
11:19
and you can create another workspace if you want. So let's say that I have two different businesses
11:25
This one can be related to Tim Rondi and then I can create another workspace called a Templates shop
11:34
Going to click Create and now I have two different workspaces. Both of them are completely free to use
11:42
free user you'll be able to have up to two free workspaces with 10 animations each with a total of 20 animations across the two workspaces and you can invite unlimited members in these free workspaces so let me show you how to invite people or colleagues to your workspace you're going to go to the workspace you want to share click on the three dots and select invite members you're going to type here
12:12
the email of the person you want to add to this workspace select either member or admin and then
12:19
hit invite or you can also copy an invite link and then send it to the person you want to join this workspace
12:27
this is really useful if you have a set of animations that you want all of your team to have access
12:34
to and the cool thing is that your team will be able to access this workspace inside canva now let me show you how to set up this workspace At the moment these two workspaces are empty we don have any animations loaded
12:50
so that's why we don't see anything yet inside Canva. Now let me show you how to add animations to your workspaces
12:59
Go under your workspace and select first project. From here, you can either upload an
13:05
animation or you can add animations to this folder let me show you first how to upload an animation
13:13
from here you'll be able to upload loti jason or dot lottie gonna click here you can drag and drop
13:20
your animations here or browse your files i have all of these lotty animations here so let me select
13:28
one of them and then hit open once your animation is uploaded to the platform you will see it here
13:35
and you can change the colors if you want or you can also edit the animation from the editor
13:43
Lottie files has an editor and this gives you a lot of freedom when using animations
13:50
Let me show you quickly how to edit this animation right here
13:54
Let's say that I want to delete one of these flowers. So I simply need to click on this pencil on top of the screen and this will load the editor
14:04
This is the Lottie editor and from here I can select one of the flowers and delete it from here or selected on the left menu and use this button to delete the flower
14:16
Now I have a pod with just one flower and I can save the animation by using this button right here
14:23
I will see my new animation here. I can give it another name if I wanted to and then save as new animation
14:31
You can also select the workspace if it's a new animation. you want to select the same workspace or another one you can also do it i'm going to leave it
14:39
here and then click save i'm going back to the dashboard by clicking on the house icon and as you
14:46
can see when i go to the first project folder i can see the uploaded element with the two
14:53
flowers and the edited one with just one flower and now that i have two elements on my workspace
15:00
let me go back to canva reload the page we're going to open
15:04
loti files and then workspaces as you can see we now have the two different workspaces that we set up
15:11
in the platform and if i see under the first project folder we now have the two animations
15:18
the one that i uploaded to lottifiles and the one that i edited inside the lottie editor and when i click
15:25
on any of these two animations i will have this little window where i can change the color of the element
15:32
if I want and then they add to design button and now I have the loti animation on my design as you can see
15:40
I can stretch it out as much as I want and it will keep its definition something else that I want to
15:48
show you here that I find very important is that sometimes when you add your lotty files to Canva
15:56
you won't see the color option but I found a way to fix this problem I'm going to check
16:02
change the colors to my loti file inside the app. So I'm gonna use any of these color palettes
16:10
Let me go for this one. It doesn't matter really which color
16:13
And then I'm going to add again this loti to my design
16:18
Now, as you can see, I have the loti that I inserted the first time
16:23
And then the one that I changed the colors to inside the app
16:27
As you can see, the second one has the options for me to change the
16:32
colors of the animation. So I can change the colors from here. Now let me show you another way to
16:38
set up your workspace. Let's say that you don't own any animation. You don't have any animation
16:44
to upload to your workspace. You can actually use the animations available in the Lottie library
16:51
and add them to your workspace so you can then access them on the app inside Kamba. For this
16:57
I'm going back to Lottie files. So let me go here. I'm going to
17:02
the homepage, so loti files.com. And from here, making sure that you are logged into your account
17:09
so you're going to see in here that you are logged in, you're then going to hover on products
17:15
and click free animations. And from here, you can browse through the Lottie library
17:20
You can use these little arrows to move along the different pages
17:25
in the library, or you can search for any animations using this search bar
17:30
And you also have different pages. pages or sections in here you can not only browse through the library of animations but a library of animators
17:41
this is pretty interesting let me get to the section because if you are interested in selling
17:46
your animation services this might be for you or if on the other hand you want to hire somebody
17:52
to create animations for you that's also the section you need to see okay so in here we see
17:59
the elements in the library filtered by featured. We also have the recent animations, the popular
18:06
ones, and then we see the animators section. From here you can see all the animators inside
18:14
loti files that are available for hire. You can see all the animations created by every single
18:21
creator and if you like any of these profiles you can simply click on the send request
18:26
button to send a message to the creator. Let me go back because in here you also have some
18:33
categories. In here you have different animation categories that can help you understand the different
18:40
kind of animations you can find in the library. This can also help you discover animations that are
18:48
interesting for the kind of designs that you need to create. And finally I also want to show you
18:53
collections because in here you can discover and get inspired by Lottie animation collections curated by the community So let me show you something interesting here i going to search for liquid so i can find some liquid animations i going to then
19:10
filter them by free and let's say that i really like this one here i'm going to select the animation
19:17
now from here i can either save this animation to my collections which can be found on this collection section
19:25
that I just showed you. You can also appreciate the animation or you can click download to download the animation
19:33
as any of these files as a loti or if you want, you can also download it as MP4 or GIF
19:40
You also have the option to save this animation on your workspace
19:46
So if I click here, I can then select which workspace I want to save this animation to
19:52
This time, let's use the templates show. shop workspace that I created. I'm going to save this animation in the first project folder and click
20:01
save. Now let me go back to Canva. I'm going to load the page. Go back to lottie files. Go to
20:08
workspaces and this time under templates shop let's see first project and I have the animation
20:15
that I just saved from the loti library in here. Let's add it to the design and now I have the
20:21
animation here. I can change the colors to it and work with it on my design. Now let me show you
20:28
how you can collaborate and share the same animations with some other colleagues or friends
20:34
using workspaces. I need to go to Lottie files. So let me go back to the platform. Here I am in
20:41
my Lottie files dashboard. I have changed the name of my workspace to Diana's workspace and I have
20:48
saved these three animations under my first project folder. Let's say that I want to share
20:54
this workspace with Ronnie. I'm going to click on the three dots of this workspace and from here
21:01
invite members once you have invited this other person to your workspace they will receive an email
21:08
or the link if you have decided to use the invite link. Once they have joined your workspace and if you
21:16
want to double check that they are indeed in your workspace you can click workspace settings and from
21:23
here select members and as you can see we have two team members in this workspace one which is me
21:31
and the other one that is Ronnie now let me show you what Ronnie sees on his end here I have
21:36
Ronnie's computer and I'm going to show you what Ronnie sees on his end so I have invited him to
21:43
my workspace and when he logs in into his plotty files in Canva and then he goes to workspaces he will see
21:52
his own workspace and the one that I have invited him to so he will see Diana's workspace and when he
21:59
click on first project he will see the three different animations I have saved on that folder and he can
22:06
use them the same way as I already showed you so if he were to use this animation here you will be
22:13
able to change its colors and then add to design. Now that we know how to use the Discover tab
22:20
and Workspaces, let's see what we can do with the import tab. From here you can upload loti files
22:28
And this feature I find that very useful because you can upload these files directly from
22:34
Canva with this app. This is pretty useful and it will save you a lot of time because
22:39
you don't have to go through the platform and upload your lot of file from
22:43
there and then come back to Canva, you can simply upload the lottie file from here. And I'm going to
22:49
show you something special because you would say, well, I can upload my lottie file from the
22:55
upload section in Canva. But what happens if you want to upload a lottie file from there? Let's go
23:01
and let's take a look. When you go to uploads and go to files, you will see that you won't be
23:07
able to upload these dot lottif files. These files are actually deactivated and I cannot
23:13
select them to upload them to Canva. But if I have the Lotti files app open and then I go to
23:20
import, I go to choose file. And as you can see, these files now are active, meaning that I can
23:27
select any of them to upload them to Canva. I'm going to select the first one. This is the pink
23:33
flower that we used before. So I'm going to click open. I can preview my flower from here
23:39
I can change the colors as well. And then I can add it to
23:43
to my design. I have my flower now here, I can change the colors to it if I want. And now let me show you
23:51
something. When you go to uploads and you go to videos, you'll see that the lot of file is now
23:58
available in here. I can bring it to my design. Let me delete this one right here and you will see
24:04
that I will be able to change its colors as well and stretch it as much as I want and it will still look very
24:12
crisp meaning that this one is still a lotify even though when we go to uploads it will have the
24:20
giflabel in here something else that i find interesting is that all the lotifies that you use with
24:28
this app will be saved here on your upload section it took me a little while to be able to understand
24:35
how to use the work spaces and how to create your own collections how to edit the animation
24:42
but after I understood this and I understood how to use the collaboration feature
24:48
I can see how useful and the potential this app has. So I really hope that this tutorial was useful and that you can take advantage of the Lottie files app
24:59
because this is only the first version of the app and it can only get better with time
25:06
To learn more about the newest apps in Canva, watch this playlist right here
25:10
and to continue learning with us, subscribe to our channel. I think that's it for today
25:15
I really hope that you enjoyed this video and I look forward to see you in the next one. Bye
#Animated Films
#Clip Art & Animated GIFs
#Design
#Multimedia Software
#Online Goodies
#Other
#Skins
# Themes & Wallpapers