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 →

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 →