Lottie Workflow: One Tool From Import To Export
SVGator’s recent updates have closed the gap between designing vector animations and shipping them as Lottie files. The web-based tool now covers the full production path: you can import an existing Lottie JSON, pull in ready-made assets from its library, build new elements from scratch, and export the final result as Lottie — all without leaving the browser or installing third-party plugins.
The export options have expanded beyond SVG since 2021. Mobile app integration arrived first, followed by video formats (MP4, AVI, MKV, MOV, WebM) and image formats (GIF, Animated PNG, WebP, image sequence). Full Lottie support rounds out the feature set, giving developers a vector format that scales infinitely, keeps file sizes low, and works across web and mobile platforms. Lottie can also embed raster graphics and support interactive behavior.
You can test the platform free before committing to the Pro plan. Free exports are limited to three watermarked files, with videos and GIFs capped at basic quality.
The workflow below walks through a practical example: importing a Lottie animation, adding an animated message bubble and an email notification, animating a character response, and exporting. The full process involves these stages:
- Importing an existing Lottie JSON and adjusting its content.
- Adding animated assets from the SVGator library.
- Creating and animating new elements from scratch.
- Exporting the finished Lottie animation.
Project Setup And Asset Import
Sign-up requires no credit card — you can authenticate with Google or Facebook, or provide name, email, and password. New projects start from a blank canvas, a static SVG upload, or an existing Lottie JSON file.
For this walkthrough, start by importing a provided Lottie demo file via the New Project panel. After the file loads, note that SVGator’s Library tab (left sidebar) stores reusable assets. The Library accepts uploads of Lottie files, static SVGs, and images, and it can save animations from other SVGator projects for reuse.
To use an animated message bubble asset, click the “+” icon in the Library’s Uploads section and select the downloaded Lottie file. Once it appears in Uploads, click it to drop it onto the canvas. All of its animated properties will show up in the timeline and remain editable.
One timing detail matters here: the playhead must sit at second 0 before adding the animated asset, since the asset begins animating from the playhead’s current position. You can reposition and scale it freely after import.
Animating The Message Bubble
With the playhead still at second 0, select the bubble and choose Animate from the context menu, then Position — or press Shift + P. This adds the first position keyframe automatically.
Drag the playhead to 0.2 seconds and move the bubble up a few pixels. The second keyframe appears, defining the motion path. Hit Play anytime to preview.
Next, the bubble should disappear after the typing dots finish animating. Select the bubble, drag the playhead to 2.2 seconds, and add a Scale animator with Shift + S (or choose Scale from the Animate menu). Then move the playhead to 2.5 seconds and set both X and Y scale values to 0 in the right-side properties panel. Keep the link icon enabled so Maintain proportions stays on and the scale changes uniformly.
To add a bounce-back effect to the scaling motion, return to the first Scale keyframe — double-click the keyframe to jump the playhead there — and open the Easing Panel next to the time indicator. Select Ease in Back from the presets. This easing’s bezier curve extends past the graph boundaries, which creates the overshoot. You can modify the bezier of any preset to create a custom function; adjusted presets appear at the top of the list. Note that easing applies from the selected keyframe toward the next keyframe to its right, and you can apply the same easing to multiple selected keyframes.
For a cleaner exit, add a one-millisecond opacity fade at the end of the scaling. Choose Opacity from the animators list, set the first keyframe at 2.4 seconds, then drag the playhead to 2.5 seconds (matching the scale animation’s end). Drag the Opacity slider in the Appearance panel all the way to 0%.
Building The Email Icon
To complete the scenario, build an email notification that appears as a response to the character’s message. The Library’s search bar makes this quick: search for “mail” and click the relevant asset from the results, then position it above the laptop.
The stock icon needs styling adjustments to fit the project. Open the email group and:
- Select the background rectangle and change its fill to a dark purple.
- Round the corners using the Radius slider.
- Delete the two lines at the lower part of the envelope for a flatter look.
- Select the Polyline element (the envelope seal flap) above the rectangle.
- Fill it with a lighter purple, then set the stroke to white at 2 px width.
Add a notification badge at the envelope’s top-right corner using the Ellipse tool (O) from the top toolbar. Draw a circle, give it a red fill, and set a white stroke of 2 px. Then activate the Text tool (marked with a “T” icon), click on the circle, and type “1”. Set the text color to white and toggle the bold style.
Select both the circle and the number, then group them with a right-click or Command/Ctrl + G. Rename the group to “Notification” by double-clicking its name. Finally, group the Notification group together with the email group below it, and name the result “new email.”
Revealing The Email
The email should pop out of the laptop right after the character finishes texting. With the “new email” group selected, click Move down twice from the header — or hit Command/Ctrl plus the down arrow twice — to push it behind other canvas elements. Drag the group behind the laptop so it’s fully hidden, and scale it down slightly.
With the playhead at 3 seconds, add both Scale and Position animators using Shift + S and Shift + P. Move the playhead to 3.3 seconds, then drag the email group above the laptop and scale it up. The on-canvas motion path can be bent to create a curved trajectory for the position animation.
For the movement itself, select both first keyframes at second 3, open the easing panel, and apply the Ease Out Cubic preset to smooth the motion into the end position.
Animate the Notification group separately so it pops in while the email reveals itself. Scale it down to 0 on both axes at 3.2 seconds, then up to 1 at 3.5 seconds. Select the first keyframe and apply Ease Out Back from the easing panel to generate the popping effect.
Character Reaction
Give the character a subtle reaction: a smile while the email appears. The mouth is a path, so its expression can be animated by manipulating the Stroke offset. Select the mouth path with the Node tool — one click selects it directly.
Drag the playhead to 3.5 seconds. From the timeline, select the last keyframe of the Stroke offset animator and duplicate it at 3.5 seconds using Command/Ctrl + D. Then move the playhead to 3.9 seconds, locate the Offset property in the properties panel, and set it to 0. The stroke now fills the path completely, generating a four-millisecond stroke offset animation.
Final Adjustments And Export
Before exporting, you can still fine-tune the imported Lottie animation itself. For instance, the character’s green arms and torso can be re-colored: select those paths with the Node tool and change the fill to any color you prefer.
When the animation is complete, SVGator exports it directly as a Lottie JSON file — no intermediate conversion step or third-party tool required.
Exporting the Lottie File
When your animation is complete, hit the Export button in the top-right corner and choose the Lottie format. A faster route is pressing Command or Ctrl + E to open the export panel directly.
- Verify that Lottie is selected in the format dropdown. The panel also lets you rename the file, set the frame rate and animation speed, and define a background color.
- Preview the result using a real Lottie player. Keep in mind that the panel’s built-in preview is not an actual Lottie render, so checking it in a browser with a Lottie player ensures every feature you used is fully supported.
- Return to the export panel and click Export to download the Lottie JSON file.
Beyond Lottie
Lottie is only one of several output options. The same project can be shared as a video on social media, delivered as an SVG animation for the web, or converted into a GIF sticker. GIF versions also work well in Figma presentations and prototypes as a high-fidelity preview of the production-ready Lottie asset.
For further exploration, these resources are worth a look:
- SVGator tutorials
Short video tutorials covering the basics of getting started with SVGator. - SVGator Help Center
Answers to common questions about the tool, its capabilities, and membership plans.
