Mobile Animations Export Settings

To export animations for mobile apps, you have to choose the Framework you want to export to. The options will be React Native or Flutter. Based on the Framework option you select, the file extension in the “Export as” field will change accordingly: it becomes .js for React Native or .dart for Flutter.

Mobile Export Settings in SVGator
Mobile Export Settings


You can also choose whether to include the player in the exported file. For better performance when using multiple animations, you can opt to use an external player by downloading and installing it in the app.

Using Player with Embedded Player in Svgator
Use Player with Embedded Player

This is especially useful if you're adding several animations to the same app, as the player won’t need to be included with each animation. This approach helps reduce the file size of your animations.

Use Player with External Player in SVGator
Use Player with External Player

Mobile animations can also be interactive, so you can choose to start the animation “On tap”, “On load” or add "Programmatic" control with our player API.

Options for Starting an Animation in SVGator
Options for Starting an Animation

You can also set a direction for your animation, it can be “Normal” or “Reverse”. Reversed means that the animation you've created will be played backwards after you export it.

Direction of Animation setting in svgator
Direction of Animation

To use the “Alternate” or “Alternate reverse” options you must set the “Iterations” to Infinite or Count number to more than 1.

“Alternate” means that your animation will be played normally first and then backwards. “Alternate reverse” means the same thing, but it will be played backwards first and then normally.

Fill Mode and Frame Rate Options in SVGator
Fill Mode and Frame Rate Options

To choose the number of times the animation will be played, pick “Infinite” to export the animation with an infinite loop or pick the “Count” number to set how many times the animation will be repeated.

Iterations Option in SVGator
Iterations Option

The "Fill mode" setting determines how animations behave after they finish. If you select "Forwards," the animation will stop at the last keyframe. Choosing "Backwards" will cause the animation to return to its initial state.

Fill Mode Option in SVGator
Fill Mode Option

You can also adjust the "Frame rate," control the animation "Speed," choose the "Canvas color," and decide whether to include it in the export.

Frame Rate and Speed Options in SVGator
Frame Rate and Speed Options

Related Topics:

How to Add Animated SVG to React Native | SVGator Help
React Native is great for building mobile apps, especially if you are already familiar with React. Now you can make it even better with animated SVG files.
What Export Settings are Available? | SVGator Help
Everything you need to know about export settings in SVGator. Create ready to use SVG animations for your website or mobile app and export with a single click.
How to Export Flutter animations | SVGator Help
Here’s how to export mobile app animations with Flutter. Learn how to create Flutter animations following these instructions:
How to animate programmatically | SVGator Help
Learn how to animate programmatically, how to access the Player API object, and how to synchronize events.
SVGator Player JS API | SVGator Help
This document describes SVGator JS API properties, methods and the Event interface as well as demonstrates usage through a Live Demo.

Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.