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