Learn LOTTIEFILES 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 LottieFiles Web Animation

# lottiefiles/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 anim = lottie.loadAnimation({
        targets: document.getElementById('animation'),
        path: 'data/animation.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
    </script>
</body>
</html>

A basic LottieFiles web example that loads and plays a JSON animation in the browser.

Let’s Try →

Lottie Hover Play

# lottiefiles/demo/hover.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:150px;height:150px;"></div>
    <script>
        const anim = lottie.loadAnimation({
        targets: document.getElementById('hoverAnim'),
        path: 'data/hover.json',
        renderer: 'svg',
        loop: false,
        autoplay: false
        });
        document.getElementById('hoverAnim').onmouseenter = () => anim.play();
    </script>
</body>
</html>

Plays the Lottie animation only when the user hovers over it.

Let’s Try →

Lottie Click Toggle

# lottiefiles/demo/click-toggle.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <div id="toggleAnim" style="width:180px;height:180px;"></div>
    <script>
        let playing = false;
        const anim = lottie.loadAnimation({
        targets: document.getElementById('toggleAnim'),
        path: 'data/toggle.json',
        renderer: 'svg',
        loop: false,
        autoplay: false
        });
        document.getElementById('toggleAnim').onclick = () => {
        playing ? anim.pause() : anim.play();
        playing = !playing;
        };
    </script>
</body>
</html>

Toggles play/pause of the animation on click.

Let’s Try →

Lottie Dark Mode Switch

# lottiefiles/demo/theme-switch.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <button id="toggle">Switch Theme</button>
    <div id="themeAnim" style="width:200px;height:200px;"></div>
    <script>
        let dark = false;
        const load = () => lottie.loadAnimation({
        targets: document.getElementById('themeAnim'),
        path: dark ? 'data/dark.json' : 'data/light.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
        let anim = load();
        document.getElementById('toggle').onclick = () => {
        anim.destroy();
        dark = !dark;
        anim = load();
        };
    </script>
</body>
</html>

Switches between two Lottie animations based on theme toggle.

Let’s Try →

Lottie Scroll-Based Animation

# lottiefiles/demo/scroll.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body style="height:2000px;">
    <div id="scrollAnim" style="width:300px;height:300px;position:fixed;top:20px;left:20px;"></div>
    <script>
        const anim = lottie.loadAnimation({
        targets: document.getElementById('scrollAnim'),
        path: 'data/scroll.json',
        renderer: 'svg',
        loop: false,
        autoplay: false
        });
        window.onscroll = () => {
        const p = window.scrollY / (document.body.scrollHeight - window.innerHeight);
        anim.goToAndStop(p * anim.totalFrames, true);
        };
    </script>
</body>
</html>

Animation frame updates based on scroll progress.

Let’s Try →

Lottie Speed Control Slider

# lottiefiles/demo/speed.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <input id="speed" type="range" min="0.2" max="3" step="0.1" value="1" />
    <div id="speedAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({
        targets: document.getElementById('speedAnim'),
        path: 'data/speed.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
        document.getElementById('speed').oninput = e => anim.setSpeed(e.target.value);
    </script>
</body>
</html>

Controls animation speed using a range slider.

Let’s Try →

Lottie Segment Playback

# lottiefiles/demo/segment.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <button id="part1">Play Part 1</button>
    <button id="part2">Play Part 2</button>
    <div id="segAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({
        targets: document.getElementById('segAnim'),
        path: 'data/segment.json',
        renderer: 'svg',
        loop: false,
        autoplay: false
        });
        document.getElementById('part1').onclick = () => anim.playSegments([0, 60], true);
        document.getElementById('part2').onclick = () => anim.playSegments([61, 120], true);
    </script>
</body>
</html>

Plays only selected frame segments from the animation.

Let’s Try →

Lottie JSON Inline Embedding

# lottiefiles/demo/inline.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <div id="inlineAnim" style="width:200px;height:200px;"></div>
    <script>
        const data = { v: '5.7.1', fr: 30, ip: 0, op: 60, layers: [] };
        lottie.loadAnimation({
        targets: document.getElementById('inlineAnim'),
        animationData: data,
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
    </script>
</body>
</html>

Uses inline JSON instead of external file.

Let’s Try →

Lottie Button Icon Animation

# lottiefiles/demo/button-icon.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <button id="btn" style="display:flex;align-items:center;gap:10px;">
        <span>Like</span>
        <div id="icon" style="width:40px;height:40px;"></div>
    </button>
    <script>
        const anim = lottie.loadAnimation({
        targets: document.getElementById('icon'),
        path: 'data/heart.json',
        renderer: 'svg',
        loop: false,
        autoplay: false
        });
        document.getElementById('btn').onclick = () => anim.play();
    </script>
</body>
</html>

Animates a Lottie icon inside a button on press.

Let’s Try →

Lottie Background Animation

# lottiefiles/demo/background.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body style="margin:0;overflow:hidden;">
    <div id="bg" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;"></div>
    <h1 style="color:white;position:relative;padding:20px;">Hello</h1>
    <script>
        lottie.loadAnimation({
        targets: document.getElementById('bg'),
        path: 'data/background.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
    </script>
</body>
</html>

A fullscreen background animation behind all content.

Let’s Try →

Code Sample Descriptions

Simple LottieFiles Web Animation

# lottiefiles/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 anim = lottie.loadAnimation({
        targets: document.getElementById('animation'),
        path: 'data/animation.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
    </script>
</body>
</html>

A basic LottieFiles web example that loads and plays a JSON animation in the browser.

Let’s Try →

Lottie Hover Play

# lottiefiles/demo/hover.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:150px;height:150px;"></div>
    <script>
        const anim = lottie.loadAnimation({
        targets: document.getElementById('hoverAnim'),
        path: 'data/hover.json',
        renderer: 'svg',
        loop: false,
        autoplay: false
        });
        document.getElementById('hoverAnim').onmouseenter = () => anim.play();
    </script>
</body>
</html>

Plays the Lottie animation only when the user hovers over it.

Let’s Try →

Lottie Click Toggle

# lottiefiles/demo/click-toggle.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <div id="toggleAnim" style="width:180px;height:180px;"></div>
    <script>
        let playing = false;
        const anim = lottie.loadAnimation({
        targets: document.getElementById('toggleAnim'),
        path: 'data/toggle.json',
        renderer: 'svg',
        loop: false,
        autoplay: false
        });
        document.getElementById('toggleAnim').onclick = () => {
        playing ? anim.pause() : anim.play();
        playing = !playing;
        };
    </script>
</body>
</html>

Toggles play/pause of the animation on click.

Let’s Try →

Lottie Dark Mode Switch

# lottiefiles/demo/theme-switch.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <button id="toggle">Switch Theme</button>
    <div id="themeAnim" style="width:200px;height:200px;"></div>
    <script>
        let dark = false;
        const load = () => lottie.loadAnimation({
        targets: document.getElementById('themeAnim'),
        path: dark ? 'data/dark.json' : 'data/light.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
        let anim = load();
        document.getElementById('toggle').onclick = () => {
        anim.destroy();
        dark = !dark;
        anim = load();
        };
    </script>
</body>
</html>

Switches between two Lottie animations based on theme toggle.

Let’s Try →

Lottie Scroll-Based Animation

# lottiefiles/demo/scroll.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body style="height:2000px;">
    <div id="scrollAnim" style="width:300px;height:300px;position:fixed;top:20px;left:20px;"></div>
    <script>
        const anim = lottie.loadAnimation({
        targets: document.getElementById('scrollAnim'),
        path: 'data/scroll.json',
        renderer: 'svg',
        loop: false,
        autoplay: false
        });
        window.onscroll = () => {
        const p = window.scrollY / (document.body.scrollHeight - window.innerHeight);
        anim.goToAndStop(p * anim.totalFrames, true);
        };
    </script>
</body>
</html>

Animation frame updates based on scroll progress.

Let’s Try →

Lottie Speed Control Slider

# lottiefiles/demo/speed.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <input id="speed" type="range" min="0.2" max="3" step="0.1" value="1" />
    <div id="speedAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({
        targets: document.getElementById('speedAnim'),
        path: 'data/speed.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
        document.getElementById('speed').oninput = e => anim.setSpeed(e.target.value);
    </script>
</body>
</html>

Controls animation speed using a range slider.

Let’s Try →

Lottie Segment Playback

# lottiefiles/demo/segment.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <button id="part1">Play Part 1</button>
    <button id="part2">Play Part 2</button>
    <div id="segAnim" style="width:200px;height:200px;"></div>
    <script>
        const anim = lottie.loadAnimation({
        targets: document.getElementById('segAnim'),
        path: 'data/segment.json',
        renderer: 'svg',
        loop: false,
        autoplay: false
        });
        document.getElementById('part1').onclick = () => anim.playSegments([0, 60], true);
        document.getElementById('part2').onclick = () => anim.playSegments([61, 120], true);
    </script>
</body>
</html>

Plays only selected frame segments from the animation.

Let’s Try →

Lottie JSON Inline Embedding

# lottiefiles/demo/inline.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <div id="inlineAnim" style="width:200px;height:200px;"></div>
    <script>
        const data = { v: '5.7.1', fr: 30, ip: 0, op: 60, layers: [] };
        lottie.loadAnimation({
        targets: document.getElementById('inlineAnim'),
        animationData: data,
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
    </script>
</body>
</html>

Uses inline JSON instead of external file.

Let’s Try →

Lottie Button Icon Animation

# lottiefiles/demo/button-icon.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
    <button id="btn" style="display:flex;align-items:center;gap:10px;">
        <span>Like</span>
        <div id="icon" style="width:40px;height:40px;"></div>
    </button>
    <script>
        const anim = lottie.loadAnimation({
        targets: document.getElementById('icon'),
        path: 'data/heart.json',
        renderer: 'svg',
        loop: false,
        autoplay: false
        });
        document.getElementById('btn').onclick = () => anim.play();
    </script>
</body>
</html>

Animates a Lottie icon inside a button on press.

Let’s Try →

Lottie Background Animation

# lottiefiles/demo/background.html
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body style="margin:0;overflow:hidden;">
    <div id="bg" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;"></div>
    <h1 style="color:white;position:relative;padding:20px;">Hello</h1>
    <script>
        lottie.loadAnimation({
        targets: document.getElementById('bg'),
        path: 'data/background.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
        });
    </script>
</body>
</html>

A fullscreen background animation behind all content.

Let’s Try →