4 Ways to Control Lottie Animation Speed
JSON-based Lottie animations are built using JavaScript;
this makes them lightweight and easy to manipulate.
In addition, parameters like speed, delay, and trigger can be changed even after the animation has been produced and exported from the design software.
The ability to make changes is highly advantageous to designers and marketers. You can adjust to fit the style of other page elements without returning to the production phase.
In addition, A/B testing on animations and page sections becomes much easier when you can change essential parameters like speed on the fly.
Below are 4 ways you can change the speed of your Lottie animations. Together, they cover every way you could want to incorporate Lottie into web pages or mobile applications.
1. Lottie Editor
You should have access to an editor if you are sourcing your Lottie animations from a design library. Once you've downloaded the file, you can adjust the speed using the built-in design editor with options to change speed, delay, colors, size, and triggers.
Creattie offers an ultra-simplistic yet powerful editor allowing you to fully customize your Lottie animations before incorporating them into your designs.
Using a Lottie editor isn't the fastest way to make changes; however, it still only takes a few seconds to go into the library and recopy the embedded code.
Here's how you can use the Creattie editor to change the speed of your animations:
Step 1. Click download
Step 2. Click Embed
Step 3. To change the speed of Lottie animation click the plus or minus buttons on the etidor.
You'll notice changes in the embedded code snippet below the preview.
2. Embedded JavaScript
Manipulating the code after it is embedded is the fastest way to change the speed of your Lottie animation. This approach, unfortunately, doesn't work with a JSON file, so you'll have to use the embedded code snippet for it to work.
Once you make changes in the editor, you copy then paste the snippet into the HTML of your project. If you are working with a CMS editor that allows you to add HTML code snippets (most do), you can change your speed using this method.
In your HTML, find the parameter within the object labeled SPEED within your Lottie's code snippet.
Speed is measured in percentage in this instance, so just change the number value to your desired speed. For example, if it's already at 100% and you want to slow it down, replace the '100' with a lower number, like '75' or' 50.'
Run the changes to view the new animation speed, then make more adjustments if necessary.
3. CMS Editor
Most CMS platforms have implemented Lottie design tools with plugins or even built-in widgets. WordPress, for example, has an extremely useful free Lottie plugin that allows you to work with a JSON file or embedded code.
You can change the speed of your animation by interacting with the CMS tool interface, they are all different, but each will allow you to make changes by increasing the speed's percentage.
Here's an example from the WordPress plugin's Lottie widget.
As you can see, Speed is adjusted with a number value; you can increase it to speed the animation up or enter a negative value to slow it down.
Check out our tutorials on WordPress, Elementor, and Divi for more information on using Lottie with a CMS.
4. Bodymovin Plugin
The most advanced way to control Lottie's animation speed is through a plugin or NPM package. You'll need to download a plugin if you are building your website or mobile application without a CMS or with a library like React JS. The process is simple; you'll just have to work with the packages' syntax.
We use the CDN for the Body Movin Plugin for our How to Add JSON Animation to HTML tutorial. Below is a screenshot of the function we use to render the animation.
If you want to set the speed, you have to run another function. For BodyMovin, the function is called .setSpeed(speed), and you control with a number value.
For more information on the BodyMovin plugin check out the documentation on GitHub.
Final Words
Speed is a fundamental part of the interaction your animation has with users. Having control without hiring a motion graphics designer or reexporting your animation is a huge advantage and one of the reasons Lottie is growing in popularity.
Check out the Creattie editor to see first-hand how easy it can be to control a Lottie's speed.
