How To Make An SVG Animation Play On Page Load

In this tutorial, you will learn how to export an animation as an SVG file that plays automatically on page load, while customizing its playback behavior, speed, responsiveness, and visual settings for optimal results.

Step 1 - Export The Animation To SVG

With the animation ready, go to the export menu and choose SVG as the format. The animation will automatically start on page load because the default trigger is set to play immediately. At this stage, you can click the export button and the file will download instantly, though additional options are available for customization.

Step 2 - Adjust Fill Mode Settings

Next, configure the fill mode. Selecting forwards will freeze the last frame when the animation ends, while backwards will jump back to the first frame. To preview the changes, click the refresh preview button and observe how the animation behaves. Switch back to forwards to maintain the final frame visible after completion before moving on to the next setting.

Step 3 - Configure Animation Direction

Review the direction setting, which defaults to normal, playing the animation exactly as designed. Options such as reverse or alternate allow the animation to play backwards or in a back-and-forth sequence. Setting reverse plays the animation from the last frame to the first.

Step 4 - Set Iterations And Loops

Control how many times the animation repeats by adjusting the iteration settings. Selecting infinite will loop the animation continuously, while choosing count allows a specific number of repetitions. For example, two iterations combined with the alternate direction create a boomerang effect, making the animation play forward and then backward.

Step 5 - Choose Player Mode

Decide whether the player code should be embedded or external. Embedded includes the animation player code directly in the file, increasing size, while external keeps the player code separate, resulting in a lighter file.

Step 6 - Adjust Animation Speed

Modify the playback speed using the slider or by typing a new value. The default 100% speed is standard, but this setting allows for faster or slower animation depending on your needs.

Step 7 - Select Responsiveness And Canvas Options

Determine whether the animation should scale to fit its container or maintain a fixed size based on the canvas from the editor. The background is transparent by default, but the canvas color can be included by checking the corresponding option and refreshing the preview.

Step 8 - Export With Custom Settings

Once all settings are configured, click the export button to download the animated SVG file. The file will reflect all adjustments, including fill mode, direction, iterations, player mode, speed, responsiveness, and background settings, and will start automatically when the page loads.