Export settings

To find the export settings of your project, click on the Export button in the top right corner of the application.

export formats web animations

You can also view here how these options actually work using the preview window on the left side of the export panel. Don't forget to Refresh the preview if you make changes.

web-animations-creator

Web animations

You can export a static SVG even if your file is already animated. It will export the file without any animation attributes. If you need the animated version, then the animation type is one of the most important things to select. You can choose between JavaScript and CSS. The difference is that CSS doesn’t support all animators and JavaScript does. Please see the compatibility table for more information.

By clicking on the Save button at the bottom, you will apply the changes made on the project or you can choose to export the animation right away with the export options selected.

Next, you can decide how the animation starts after you export it from SVGator. For a bit of interactivity and engagement, you can create a hover animation (start the animation on mouse-over) or start the animation on click. In case you would like to start the animation on click, you will have to export JavaScript.

web animations interactive hover animations

You can also set a direction for your animation, it can be Normal or Reversed.

Reversed means that the animation you've created will be played backwards after you export it. To use the Alternate or Alternate reversed 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 reversed means the same thing, but it will be played backwards first and then normally.

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.

web animations settings

If you would like your animation to stop as your animation should end normally then pick Forwards as Fill mode. If you would prefer it to stop on the first keyframe, as it looks before the animation would start, set the Fill mode to Backwards.

To control the speed of the animation, you can set the Speed percentage value to a lower value in order to slow down the exported animation or to a higher value to speed up the animation.

You will also find two different document options, Fixed size and Responsive.

svg animations responsive

Fixed-size means that we will add the width and height properties to the exported file, so you will see only what’s on the canvas during the animation.

Responsive means that we will not include width and height properties in the code, so you will export the animation as it is, even with the elements in the grey area that are not on the canvas.

Mobile animations

To export animations for mobile apps, choose the mobile tab from the export options.

animations for mobole apps

Next, you have to choose the Framework you want to export to. The options will be React Native or Flutter.

mobile animation react native flutter

Depending on which Framework option you choose, you’ll see that the “Export as:” option changes to SampleProject.js when you choose React Native or SampleProject.dart when you choose Flutter.

You can choose if you want to include the player in the exported file.

animations react flutter

To have improved performance you can choose to download the player and install it in the app.

react native player external

Mobile animations can also be interactive, so you can choose to start the animation on tap or on load.

interactive mobile animations

More articles:

Change canvas size

Exported file format

Create an interactive SVG


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