Welcome back. Today, we'll animate an SVG file in Lottie Creator. Here's how the final animation
should look like once we're done. To get started, import the SVG file into Lottie Creator. Then have a quick
look at the SVG file’s layers. Let's begin by animating the smoke
that the rocket is producing. We can adjust the anchor point
by moving it to the bottom of the rocket. And animate the smoke layer’s scale property
while keeping its aspect ratio locked. After that, we can animate the rocket it
self
by simulating the way it looks like as it flies. When the position property is animated,
moving the rocket in the canvas would automatically create keyframes in the timeline. And lastly, lets animate the color of the
smoke coming out of the rocket. Here we can use the eyedropper to select the exact
same pink color that was used in the flame. The advantage of animating SVGs in Lottie Creator
is that they are treated like any other native project. Because of this, you can always add
new s
hapes to the animation. For example, you could add an entire
background to the existing animation. Since the keyframes take less than 2 seconds feel free to adjust the timeline
to the duration that fits your needs. You can now preview the animation
and play it on loop whenever you'd like. The great thing about using SVGs is that you can find
millions of these files from a huge range of sources. You can even create them yourself. Looks like that's a wrap for this tutorial. Until we meet again.
Happy creating.
Comments