Learn Lottie - 10 Code Examples & CST Typing Practice Test

Lottie is an open-source animation library that renders Adobe After Effects animations in real-time on web, mobile, and desktop platforms. It allows designers and developers to ship high-quality animations as JSON files exported via Bodymovin.

View all 10 Lottie code examples →

Simple Lottie Animation Lottie Loop Animation Lottie Play Once Lottie Control Animation Lottie with Multiple Animations Lottie Hover Play Lottie Reverse Animation Lottie Speed Control Lottie Click Trigger Lottie Segment Animation

Learn LOTTIE with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Lottie Animation

# lottie/demo/index.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="animation" style="width:200px;height:200px;"></div>
    <script>
        const animation = lottie.loadAnimation({
        targets: document.getElementById('animation'),
        path: 'data/animation.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
    </script>
    </body>
</html>

A basic Lottie-web example that loads and plays a JSON animation in a web page.

Let’s Try →

Lottie Loop Animation

# lottie/demo/loop.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="loopAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({
        container: document.getElementById('loopAnim'),
        path: 'data/loop.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
    </script>
    </body>
</html>

Plays a Lottie animation on loop.

Let’s Try →

Lottie Play Once

# lottie/demo/play_once.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="playOnce" style="width:200px;height:200px;"></div>
    <script>
        lottie.loadAnimation({
        container: document.getElementById('playOnce'),
        path: 'data/play_once.json',
        renderer: 'svg',
        loop: false,
        autoplay: true
        });
    </script>
    </body>
</html>

Plays a Lottie animation once without looping.

Let’s Try →

Lottie Control Animation

# lottie/demo/control.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="controlAnim" style="width:200px;height:200px;"></div>
    <button onclick="anim.play()">Play</button>
    <button onclick="anim.stop()">Stop</button>
    <script>
        const anim = lottie.loadAnimation({
        container: document.getElementById('controlAnim'),
        path: 'data/control.json',
        renderer: 'svg',
        loop: true,
        autoplay: false
        });
    </script>
    </body>
</html>

Controls playback of a Lottie animation via buttons.

Let’s Try →

Lottie with Multiple Animations

# lottie/demo/multiple.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="anim1" style="width:150px;height:150px;"></div>
    <div id="anim2" style="width:150px;height:150px;"></div>
    <script>
        lottie.loadAnimation({ container: document.getElementById('anim1'), path: 'data/anim1.json', renderer: 'svg', loop: true, autoplay: true });
        lottie.loadAnimation({ container: document.getElementById('anim2'), path: 'data/anim2.json', renderer: 'svg', loop: true, autoplay: true });
    </script>
    </body>
</html>

Displays multiple Lottie animations on the same page.

Let’s Try →

Lottie Hover Play

# lottie/demo/hover_play.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="hoverAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({ container: document.getElementById('hoverAnim'), path: 'data/hover.json', renderer: 'svg', loop: false, autoplay: false });
        document.getElementById('hoverAnim').addEventListener('mouseenter', () => { anim.goToAndPlay(0,true); });
    </script>
    </body>
</html>

Plays a Lottie animation when hovered.

Let’s Try →

Lottie Reverse Animation

# lottie/demo/reverse.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="reverseAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({ container: document.getElementById('reverseAnim'), path: 'data/reverse.json', renderer: 'svg', loop: true, autoplay: true });
        anim.setDirection(-1);
    </script>
    </body>
</html>

Plays a Lottie animation in reverse.

Let’s Try →

Lottie Speed Control

# lottie/demo/speed.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="speedAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({ container: document.getElementById('speedAnim'), path: 'data/speed.json', renderer: 'svg', loop: true, autoplay: true });
        anim.setSpeed(2);
    </script>
    </body>
</html>

Changes playback speed of a Lottie animation.

Let’s Try →

Lottie Click Trigger

# lottie/demo/click_trigger.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="clickAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({ container: document.getElementById('clickAnim'), path: 'data/click.json', renderer: 'svg', loop: false, autoplay: false });
        document.getElementById('clickAnim').addEventListener('click', () => { anim.goToAndPlay(0,true); });
    </script>
    </body>
</html>

Plays Lottie animation when clicked.

Let’s Try →

Lottie Segment Animation

# lottie/demo/segment.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="segmentAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({ container: document.getElementById('segmentAnim'), path: 'data/segment.json', renderer: 'svg', loop: true, autoplay: false });
        anim.playSegments([0,50], true);
    </script>
    </body>
</html>

Plays only a segment of the animation.

Let’s Try →

Frequently Asked Questions about Lottie

What is Lottie?

What are the primary use cases for Lottie?

App onboarding animations. Micro-interactions (buttons, loaders, checkmarks). Marketing website animations. Animated illustrations and icons. Interactive storytelling and tutorials

What are the strengths of Lottie?

Reduces app bundle size compared to GIF/video animations. Scalable vector-based animations. Interactive animations controllable via code. Seamless designer-to-developer workflow. High-quality playback across multiple platforms

What are the limitations of Lottie?

Requires After Effects for creation. Some complex AE effects may not export properly. JSON files can become large for very complex animations. Limited real-time physics or dynamic simulations. Editing requires re-export from After Effects

How can I practice Lottie typing speed?

CodeSpeedTest offers 10+ real Lottie code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Simple Lottie Animation

# lottie/demo/index.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="animation" style="width:200px;height:200px;"></div>
    <script>
        const animation = lottie.loadAnimation({
        targets: document.getElementById('animation'),
        path: 'data/animation.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
    </script>
    </body>
</html>

A basic Lottie-web example that loads and plays a JSON animation in a web page.

Let’s Try →

Lottie Loop Animation

# lottie/demo/loop.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="loopAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({
        container: document.getElementById('loopAnim'),
        path: 'data/loop.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
    </script>
    </body>
</html>

Plays a Lottie animation on loop.

Let’s Try →

Lottie Play Once

# lottie/demo/play_once.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="playOnce" style="width:200px;height:200px;"></div>
    <script>
        lottie.loadAnimation({
        container: document.getElementById('playOnce'),
        path: 'data/play_once.json',
        renderer: 'svg',
        loop: false,
        autoplay: true
        });
    </script>
    </body>
</html>

Plays a Lottie animation once without looping.

Let’s Try →

Lottie Control Animation

# lottie/demo/control.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="controlAnim" style="width:200px;height:200px;"></div>
    <button onclick="anim.play()">Play</button>
    <button onclick="anim.stop()">Stop</button>
    <script>
        const anim = lottie.loadAnimation({
        container: document.getElementById('controlAnim'),
        path: 'data/control.json',
        renderer: 'svg',
        loop: true,
        autoplay: false
        });
    </script>
    </body>
</html>

Controls playback of a Lottie animation via buttons.

Let’s Try →

Lottie with Multiple Animations

# lottie/demo/multiple.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="anim1" style="width:150px;height:150px;"></div>
    <div id="anim2" style="width:150px;height:150px;"></div>
    <script>
        lottie.loadAnimation({ container: document.getElementById('anim1'), path: 'data/anim1.json', renderer: 'svg', loop: true, autoplay: true });
        lottie.loadAnimation({ container: document.getElementById('anim2'), path: 'data/anim2.json', renderer: 'svg', loop: true, autoplay: true });
    </script>
    </body>
</html>

Displays multiple Lottie animations on the same page.

Let’s Try →

Lottie Hover Play

# lottie/demo/hover_play.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="hoverAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({ container: document.getElementById('hoverAnim'), path: 'data/hover.json', renderer: 'svg', loop: false, autoplay: false });
        document.getElementById('hoverAnim').addEventListener('mouseenter', () => { anim.goToAndPlay(0,true); });
    </script>
    </body>
</html>

Plays a Lottie animation when hovered.

Let’s Try →

Lottie Reverse Animation

# lottie/demo/reverse.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="reverseAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({ container: document.getElementById('reverseAnim'), path: 'data/reverse.json', renderer: 'svg', loop: true, autoplay: true });
        anim.setDirection(-1);
    </script>
    </body>
</html>

Plays a Lottie animation in reverse.

Let’s Try →

Lottie Speed Control

# lottie/demo/speed.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="speedAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({ container: document.getElementById('speedAnim'), path: 'data/speed.json', renderer: 'svg', loop: true, autoplay: true });
        anim.setSpeed(2);
    </script>
    </body>
</html>

Changes playback speed of a Lottie animation.

Let’s Try →

Lottie Click Trigger

# lottie/demo/click_trigger.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="clickAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({ container: document.getElementById('clickAnim'), path: 'data/click.json', renderer: 'svg', loop: false, autoplay: false });
        document.getElementById('clickAnim').addEventListener('click', () => { anim.goToAndPlay(0,true); });
    </script>
    </body>
</html>

Plays Lottie animation when clicked.

Let’s Try →

Lottie Segment Animation

# lottie/demo/segment.html
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
    </head>
    <body>
    <div id="segmentAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({ container: document.getElementById('segmentAnim'), path: 'data/segment.json', renderer: 'svg', loop: true, autoplay: false });
        anim.playSegments([0,50], true);
    </script>
    </body>
</html>

Plays only a segment of the animation.

Let’s Try →

Frequently Asked Questions about Lottie

What is Lottie?

What are the primary use cases for Lottie?

App onboarding animations. Micro-interactions (buttons, loaders, checkmarks). Marketing website animations. Animated illustrations and icons. Interactive storytelling and tutorials

What are the strengths of Lottie?

What are the limitations of Lottie?

How can I practice Lottie typing speed?

CodeSpeedTest offers 10+ real Lottie code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.