Creating Customized Lottie Animations With SVGator

This text is a sponsored by SVGator

SVGator has gone by way of a collection of updates since our final article, which was revealed in 2021, when it was already thought of to be probably the most superior web-based software for vector animation. Step one towards extra versatile software program got here with the cell export function that made it attainable to implement the animations in iOS and Android functions.

The animation software continued its improve with a collection of recent export choices: video codecs together with MP4, AVI, MKV, MOV, and WebM, in addition to picture codecs equivalent to GIF, Animated PNG, WebP, and picture sequence. By masking a bigger space of customers’ wants, the app now allows anybody to create animated stickers, social media, and e-newsletter animations, video belongings, and lots of extra sorts of visible content material on demand.

The purpose of turning into a “one software for all” nonetheless lacked the final piece of the puzzle, specifically full help for Lottie recordsdata. Lottie, similar to SVG, is a vector-based format, but it surely has even higher complete multi-platform help, a incontrovertible fact that makes it tremendous common amongst builders and design professionals. It’s constructed to be used throughout numerous platforms, enabling clean integration into each net and cell functions. Its file dimension is minimal, it’s infinitely scalable, and builders discover it easy to implement as soon as they get acquainted with the format. Lottie can incorporate raster graphics and in addition helps interactivity.

SVGator’s newest model has the whole lot you want in your numerous functions with out the necessity for any third-party apps or plug-ins.

Observe: You possibly can check all of SVGator’s functionalities freed from cost earlier than committing to the Professional plan. Nevertheless, you possibly can export as much as three watermarked recordsdata, with movies and GIFs restricted to primary high quality.

On this article, we’ll observe a creation course of made of those steps:

Importing an existent Lottie JSON and making some minor changes;
Importing new animated belongings created with SVGator (utilizing the library);
Creating and animating new parts from scratch;
Exporting the Lottie animation.

Getting Began With SVGator

The sign-up course of is straightforward, quick, and simple, and no bank card is required. Join both with Google or Fb or, alternatively, by offering your title, e-mail handle, and password. Begin a mission both with a Lottie animation or a static SVG. In case you don’t have an current file, you possibly can design and animate the whole lot ranging from a clean canvas.

Now that you just’ve created your account, let’s dive proper into the enjoyable half. Right here’s a preview of how your animation goes to look by the point you’re finished following this information. Neat, proper?

(Giant preview)

Create A New Challenge

After logging in and clicking on the New Challenge choice, you can be taken to the New Challenge Panel, the place you possibly can select between ranging from a clean mission or importing a file. Let’s begin this mission with an current Lottie JSON.

Obtain the Lottie demo

Click on on the Add file button and navigate to the listing the place you have got saved your Lottie file.

Choose the “Quick response.json” file and click on Open.

Hit play within the editor, and the animation ought to appear to be this:

(Giant preview)

Observe: Be certain that to hit Save after every step to be sure you don’t lose any of your progress whereas engaged on this mission alongside our information.

Import An Animated Asset

On this step, you’ll discover ways to use the Library to import new belongings to your mission. You possibly can simply select from a wide range of ready-made SVGs saved in numerous classes, load new recordsdata out of your laptop (Lottie, static SVG, and pictures), or save animations from different SVGator tasks and reuse them.

On this case, let’s use an animated message bubble beforehand created and saved to the Uploads part of the Library.

Learn to create and save animated belongings with this brief video tutorial.

Obtain the message bubble Lottie animation

Navigate to the left sidebar of the app and swap to the Library tab, then click on the “+” icon to add the message bubble asset that you just downloaded earlier.
After it’s loaded within the uploads part, merely click on on it so as to add it to your mission.

All of the animated properties of the asset at the moment are current within the timeline, and you’ll edit them if you’d like.

Observe: Be certain that the playhead is on the second “0” earlier than including the animated asset. When including an animated asset, it should all the time begin animating from the purpose the place the playhead is positioned.
Freely modify its place and dimension as you would like.
With the playhead on the second 0, click on on the Animate button, then select Place.

At this level, it is best to have the primary Place keyframe robotically added on the second 0, and you’re prepared to begin animating.

Animate The Message Bubble

Begin by dragging the playhead on the timeline at 0.2 seconds:

Then, drag the message bubble up a number of pixels. The second keyframe will seem within the timeline, marking the ingredient’s new place, thus creating the two milliseconds animation.

Observe: You possibly can hit Play at any second to test how the whole lot seems!

Subsequent, you should use the Scale animator to make the bubble disappear after the dots representing the typing are finished animating by scaling it right down to 0 for each the X and Y axes:

With the message bubble nonetheless chosen, drag the playhead at 2.2 seconds, click on on Animate, and choose Scale (or simply press Shift + S on the keyboard) to set the primary Scale keyframe, then drag the playhead at 2.5 seconds.
Set the size properties to 0 for each the X and Y axes (in the best aspect panel). The bubble received’t be seen anymore at this level.

Observe: To take care of the ratio whereas altering the size values, be sure you have the Keep proportions on (the hyperlink icon subsequent to the size inputs).

So as to add an additional contact of curiosity to this scaling movement, add an easing operate preset:

First, soar again to the primary Scale keyframe (you can even double-click the keyframe to leap the playhead proper at it).
Open the Easing Panel subsequent to the time indicator and scroll down by way of the presets checklist, then choose Ease in Again. As a consequence of its bezier going out of the graph, this easing operate will create a bounce-back impact for the size animation.

Observe: You possibly can modify the bezier of a particular easing preset and create a brand new customized operate, which can seem on the prime of the checklist.

Understand that you want no less than one keyframe chosen in the event you intend to use an easing. The easing operate will apply from the chosen keyframe towards the subsequent keyframe at its proper. After all, you possibly can apply a sure easing for a number of keyframes without delay.

To get a smoother transition when the message bubble disappears, add an Opacity animation of 1 millisecond on the finish of the scaling:

Select Opacity from the animators’ checklist and set the primary keyframe at 2.4 seconds, then drag the playhead at 2.5 seconds to match the ending keyframe from the size animation above.
From the Look panel, drag the Opacity slider all the way in which to the left, at 0%.

Create An E-mail Icon

For the idea behind this animation to be full, let’s create (and later animate) a “new e-mail” notification as a response to the character sending that message.

As soon as once more, SVGator’s asset library turns out to be useful for this step:

Go to the search bar from the Library and kind in “mail,” then click on on the mail asset from the outcomes.
Place it someplace above the laptop computer. Edit the mail icon to raised match the model of the animation:

Open the e-mail group and choose the rectangle from the again.
Change its fill coloration to a darkish purple.
Spherical up the corners utilizing the Radius slider.

Make the ingredient’s design minimal by deleting these two strains from the decrease a part of the envelope.

Choose the envelope seal flap, which is the Polyline ingredient within the group, above the rectangle.
Add a lighter purple for the fill, set the stroke to 2 px width, and in addition make it white.

To make the animation much more attention-grabbing, create a notification alert within the top-right nook of the envelope:

Use the Ellipse software (O) from the toolbar on prime and draw a circle within the top-right nook of the envelope.
Select a pleasant pink coloration for the fill, and set the stroke to white with a 2 px width.

Click on on the “T” icon to pick out the Textual content software.
Click on on the circle and kind “1”.
Set the colour to white and click on on the “B” icon to make it daring.

Choose each the pink circle and the quantity, and group them: right-click, and hit Group.

You may also hit Command or Ctrl + G in your keyboard. Double-click on the newly created group to rename it to “Notification.”

Choose each the notification group and e-mail group under and create a brand new group, which you’ll be able to title “new e-mail.”

Animate The New E-mail Group

Let’s animate the brand new e-mail coming out of the laptop computer proper after the character has completed texting his message:

With the “New e-mail” group chosen, click on twice on the Transfer down icon from the header to put the group final.
You may also press Command or Ctrl + arrow down in your keyboard.
Drag the group behind the laptop computer (on the canvas) to cover it totally, and in addition scale it down just a little.
With the playhead at 3 seconds, add the animators Scale and Place.
You may also try this by urgent Shift + S and Shift + P in your keyboard.

Drag the playhead on the second 3.3 on the timeline.
Transfer the New E-mail group above the laptop computer and scale it up a bit.
You may also bend the movement path line to create a curved trajectory for the place animation.

Choose the primary keyframes on the second 3.
Open the easing panel.
And click on on the Ease Out Cubic preset so as to add it to each keyframes.

Animate The Notification

Let’s animate the notification dot individually. We’ll make it pop in whereas the e-mail group reveals up.

Choose the Notification group.
Create a scale-up animation for it with 0 for each the X and Y axes at 3.2 and 1 at 3.5 seconds.
Choose the primary keyframe and, from the easing panel, select Ease Out Again. This easing operate will make sure the popping impact.

Add Expressiveness To The Character

Make the character smile whereas wanting on the e-mail that simply popped out. For this, it’s essential to animate the stroke offset of the mouth:

Choose the mouth path. You should utilize the Node software to pick out it straight with one click on.
Drag the playhead at 3.5 seconds, which is the second from the place the smile will begin.
Choose the final keyframe of the Stroke offset animator from the timeline and duplicate it at second 3.5, or you can even use Ctrl or Cmd + D for duplication.

Drag the playhead at second 3.9.
Go to the properties panel and set the Offset to 0. The stroke will now fill the trail all the way in which, making a stroke offset animation of 4 milliseconds.

Last Edits

You possibly can nonetheless make every kind of changes to your animation earlier than exporting it. On this case, let’s change the colour of the preliminary Lottie animation we used to begin this mission:

Use the Node software to pick out all of the inexperienced paths that type the character’s arms and torso.
Change the colour as you want.

Export Lottie

When you’re finished modifying, you possibly can export the animation by clicking on the highest proper Export button and choosing the Lottie format. Alternatively, you possibly can press Command or Ctrl + E in your keyboard to leap on to the export panel, from the place you possibly can nonetheless choose the animation you need to export.

Be certain that the Lottie format is chosen from the dropdown. Within the export panel, you possibly can set a reputation for the file you’re about to export, select the body fee and animation velocity, or set a background coloration.
You possibly can preview the Lottie animation with a Lottie participant.
Observe: This step is advisable to verify all animations are supported within the Lottie format by previewing it on a webpage utilizing the Lottie participant. The preview within the export panel isn’t an precise Lottie animation.
Get again to the export panel and easily click on Export to obtain the Lottie JSON.

Last Ideas

Now that you just’re finished along with your animation don’t overlook that you’ve loads of export choices accessible moreover Lottie. You possibly can submit the identical mission on social media in video format, export it as an SVG animation for the net, or flip it right into a GIF sticker or another sort of visible you possibly can consider. GIF animations will also be utilized in Figma displays and prototypes as a high-fidelity preview of the production-ready Lottie file.

We hope you loved this text and that it’ll encourage you to create wonderful Lottie animations in your subsequent mission.

Beneath, you’ll find a number of helpful assets to proceed your journey with SVG and SVGator:

SVGator tutorials
Try a collection of brief video tutorials that will help you get began with SVGator.
SVGator Assist Middle
It solutions the most typical questions on SVGator, its options, and membership plans.