Guide · Open source
How to use lottie-web: install, load and control animations
Updated · written with AI from the project's own documentation and checked against our catalogue data
lottie-web is an open-source JavaScript library that takes an animation designed in Adobe After Effects, exported as JSON with the Bodymovin plugin, and draws it in a web page. This guide walks through exporting the file, installing the HTML player with npm, loading the animation and controlling playback. By the end you will know the main settings and methods you need for a basic working animation.
Lottieairbnb/lottie-web · ★ 32.3k · MIT Install options & downloads Quick start
- 1Export the JSON. In After Effects, open the bodymovin panel, pick a composition, choose a destination folder and click Render.
- 2Install lottie-web. Run npm install lottie-web in your project. This requires Node.js or npm.
- 3Include the player. Import lottie-web in your project or include the lottie.js file from the build/player folder, gzipped for production.
- 4Add a container. Create a DOM element that will hold the animation.
- 5Call loadAnimation. Pass the container, renderer, loop, autoplay and path or animationData to lottie.loadAnimation().
- 6Control playback. Use the returned instance to call play, pause, setSpeed or goToAndStop as needed.
What you need before you start
You need two things: an animation exported from Adobe After Effects as JSON, and the lottie-web player in your web project. The player is installed with npm, so you need Node.js or npm available. The export side depends on the Bodymovin plugin, which the README says you install into After Effects.
- Node.js or npm, for installing lottie-web via npm
- Adobe After Effects with the Bodymovin plugin, to export the animation
- An animation composition you want to export
Export the animation from After Effects
Open your After Effects project and select the bodymovin extension from Window > Extensions > bodymovin. A panel opens with a Compositions tab listing your project compositions. Pick the composition you want, choose a destination folder, and click Render.
Look for the exported JSON file in that folder. If your animation used images or AI layers, an images folder with the exported files will also be created.
- Open Window > Extensions > bodymovin
- Select the composition in the Compositions tab
- Select a Destination Folder, then click Render
Install the HTML player
The README's npm install command for the HTML player is the one you need in a package-managed project. The package is named lottie-web. Bower and a direct script file are also listed in the README, but npm is the simplest route for most front-end projects.
npm install lottie-webLoad and play an animation with loadAnimation
Call lottie.loadAnimation() to start an animation. It takes one object with the settings. Use either animationData (the exported object) or path (the relative path to the JSON file), not both, since they are mutually exclusive. The function returns an animation instance you can control with methods such as play, pause and setSpeed.
The container is the DOM element that will hold the animation. The renderer option accepts 'svg', 'canvas' or 'html'. Set loop and autoplay to true or false as needed; loop also accepts a number.
- container: the DOM element that will contain the animation
- renderer: 'svg', 'canvas' or 'html'
- loop: true, false or a number
- autoplay: starts playing as soon as it is ready
- path: relative path to the JSON file (exclusive with animationData)
- animationData: the exported animation object
- name: a name for future reference
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
});Control playback
Animation instances have methods including play, stop, pause, setSpeed(speed), goToAndStop(value, isFrame), goToAndPlay(value, isFrame), setDirection(direction) and destroy(). A speed of 1 is normal, and a direction of 1 is forward while -1 is reverse.
playSegments(segments, forceFlag) plays a frame range or a sequence of ranges. getDuration(inFrames) returns the length in frames when true, or in seconds when false. Global methods such as lottie.play() and lottie.destroy() can target one animation by name or affect all of them when no name is given.
- setSpeed(speed): 1 is normal speed
- setDirection(direction): 1 forward, -1 reverse
- goToAndStop(value, isFrame): time-based unless isFrame is true
- playSegments(segments, forceFlag): frame ranges
- destroy(): removes the animation instance
Tune quality and fix common problems
lottie.setQuality() accepts 'high', 'medium', 'low', or a number greater than 1 to improve performance. The README notes that for some animations a value as low as 2 shows no visible difference. If you see mask issues in Safari, the README suggests lottie.setLocationHref(), which sets the location svg elements with ids are referenced from.
If you call loadAnimation several times with the same animation that contains repeaters, deep clone the object before passing it, as the README advises.
- Use setQuality to trade visual detail for performance
- Try setLocationHref if masks misbehave in Safari
- Deep clone animationData when reusing repeater animations
What people use it for
- Showing a designer-made animated logo or icon on a website
- Playing an onboarding or product explainer animation in a web page
- Looping a short decorative motion element with the svg or canvas renderer
- Playing specific frame ranges of an animation on scroll or interaction using playSegments
Frequently asked questions
Is lottie-web free to use?
The repository is licensed under MIT, as stated in the project details. Check the license file in the repository for the full terms before using it in a commercial project.
How do I install lottie-web?
The README gives npm install lottie-web for the HTML player. You need Node.js or npm installed. Bower and a script file from cdnjs are also listed as options.
Do I need After Effects to use lottie-web?
Yes, for the normal workflow. The animation is exported from After Effects as JSON using the Bodymovin plugin, and lottie-web loads that file. Without After Effects you would need another source of Lottie JSON files.
Why does my animation not load or show?
Check that the path option points to the correct JSON file, or that animationData is a valid exported object. Make sure the container element exists in the DOM. If your animation uses repeaters and you call loadAnimation more than once, deep clone the data as the README recommends.
What is the difference between the svg, canvas and html renderers?
The renderer option accepts 'svg', 'canvas' or 'html'. The README does not compare their performance or features in detail, so test the renderer that works best with your animation and browser.
How does lottie-web compare to Rive or dotLottie?
The README does not compare them. Rive and dotLottie are listed as comparable projects in this directory. Choose based on your design tools, file format needs and team workflow.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
lottie-web suits front-end developers who want designer-made After Effects motion in a website and have a team that already exports from After Effects. It is a poor fit if simple CSS or JavaScript animations would do, or if you do not have After Effects, since the workflow depends on exporting from it.
Install options & downloads