I’ve created an animation that’s set to 10 fps in After Effects 2025. When exporting the animation to .JSON, there is—AFAICT—a frame rate line included ("fr": 10,). However, when I play the animation, it’s playing at a much higher frame rate.
Is there some way I can explicitly set the animations frame rate?
Hi,
While the JSON file does include the frame rate (“fr”: 10), the playback speed in the target environment (web browser, mobile app, etc.) is often determined by the player or renderer, not solely by the JSON data itself.
Here’s a breakdown of why this happens and how to address it:
Understanding the Problem:
JSON as Data, Not Execution:
The JSON file primarily stores animation data (keyframe positions, transforms, etc.). It’s essentially a set of instructions.
The player (e.g., Lottie web player, mobile app Lottie library) interprets these instructions and renders the animation.
The player’s code or configuration might override or ignore the frame rate specified in the JSON.
Playback Environment Variations:
Web browsers, mobile devices, and other platforms have different rendering capabilities and performance characteristics.
The player might attempt to smooth out animation playback by interpolating frames or adjusting the speed to maintain a consistent visual experience, even if it deviates from the intended frame rate.
Player Settings:
Many Lottie players and libraries offer options to control playback speed or frame rate.
If these settings are not configured correctly, the animation might play at an unintended speed.
Solutions and Workarounds:
Player-Specific Settings:
Lottie Web:
If you’re using the Lottie web player, check the player’s documentation for options to control playback speed or frame rate.
Look for properties like speed or methods to manipulate the animation timeline.
Example of setting the speed in the lottie web player:
var animation = lottie.loadAnimation({
container: document.getElementById(‘your-animation-container’),
renderer: ‘svg’,
loop: true,
autoplay: true,
path: ‘your-animation.json’
});
animation.setSpeed(1.0); // 1.0 is normal speed. 0.5 is half, 2.0 is double
Mobile (iOS/Android):
Consult the documentation for the Lottie libraries used in your mobile apps.
There are usually properties or methods to set the playback speed.
Frame Rate Consistency in After Effects:
Double-check your After Effects composition settings to ensure the frame rate is consistently set to 10 fps throughout the animation.
Avoid using expressions or time remapping that might introduce variations in the animation’s timing.
Keyframe Spacing:
If you’re experiencing inconsistent playback, try adjusting the spacing of your keyframes in After Effects.
Ensure that keyframes are evenly distributed across the timeline to maintain a consistent frame rate.
Simplify the Animation:
Complex animations with many layers, effects, or expressions can put a strain on the player, leading to performance issues and inaccurate playback.
Simplify your animation as much as possible to improve performance.
Test in Multiple Environments:
Test your animation in different web browsers and mobile devices to identify any platform-specific issues.
Pre-rendering:
If you are having severe consistancy issues, and you are only using the animation as a video, you could pre-render the animation as a video file, like a .mp4. This removes the need for the lottie player to render the animation, and will play at the correct framerate.
Debugging:
Use the developers console in the web browser, or the debugging tools in the mobile development enviroment, to see if there are any errors being produced by the lottie player.
Hi @Henrik1
Are you exporting using the LottieFiles plugin? Also, are you still experiencing this issue with the latest version of the plugin?