Getting Lottie from this Codepen to also work from VSCode

Question

Getting Lottie from this Codepen to also work from VSCode

57 views Asked by mikes1025 At 13 October 2023 at 16:57

I have code from a Codepen that I'd like to base my project from but I when I play this from VS Code I get an error that says lottie is not defined. I have all the libraries in Codepen loaded from script elements in the VS Code's html header, everything in VS Code is inline with the Codepen as far as I tell.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
.container {
  display: flex;
  margin: auto;
  width: 50vh;
  height: 50vh;
  background-color:'#000000'
}
    </style>
    <title>Document</title>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script> 
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.11/lottie.min.js”></script>
</head>

Will anyone catch what I'm missing? Thanks in advance.

codepen is linked here

Original Q&A

There are 2 answers

**mikes1025** · Answer 1 · 2023-10-16 15:12:18

mikes1025 On 16 October 2023 at 15:12

I'm using "fancy" quotes in my links, this is why my bodymovin library doesn't run. Javascript simply doesn't recognize the code like it would not a comment.

**vijay pawar** · Answer 2 · 2023-10-21 04:36:51

Reference to your codepen example check the following code which works smooth on VS code without any error.

Note: Always use updated CDN script

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LottieFiles</title>
    <style>
        body {
            background-color: aliceblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 300px;
        }

        .button-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 60vw;
        }

        button {
            height: 40px;
            width: 120px;
            padding: 5 10 5 10;
            background-color: rgb(81, 81, 255);
            color: white;
            font-weight: 700;
            font-size: medium;
            border: none;
            margin: 5px;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div id="container"></div> <!-- This container takes LottieFiles object-->
    <div class="button-row">
        <button onclick="play('bird')">Bird</button>
        <button onclick="play('explosion')">Explosion</button>
        <button onclick="play('feather')">Feather</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"
        integrity="sha512-jEnuDt6jfecCjthQAJ+ed0MTVA++5ZKmlUcmDGBv2vUI/REn6FuIdixLNnQT+vKusE2hhTk2is3cFvv5wA+Sgg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>

        var container = document.getElementById('container');

        var jsonPath = 'https://assets2.lottiefiles.com/private_files/lf30_k9zqevoo.json';

        //LottieFiles object created
        var animation = lottie.loadAnimation({
            container: container,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: jsonPath,
        });

        // Initial animation when an object is created and animation is loaded into DOM
        animation.addEventListener("DOMLoaded", () => {
            animation.goToAndPlay('bird', true);
        });

        // Function that takes a string and passed to the method 'goToAndPlay(value/marker name,isFrame)'and plays
        function play(frames) {
            switch (frames) {
                case 'bird':
                    animation.goToAndPlay(frames, true);
                    break;
                case 'explosion':
                    animation.goToAndPlay(frames, true);
                    break;
                case 'feather':
                    animation.goToAndPlay(frames, true);
                    break;
                default:
                    break;
            }

        }

        //Container in which LottieFiles object is injected and that targeted to handle DOM events but not .lottie.min.js events
        // container.addEventListener('click', () => {
        //     play(animation, 'feather');
        //     animation.addEventListener('loopComplete', () => {
        //         play(animation, 'bird');
        //     });
        // });

    </script>
</body>

</html>

TechQA.

Getting Lottie from this Codepen to also work from VSCode

There are 2 answers

Related Questions in VISUAL-STUDIO-CODE

Related Questions in LOTTIE

Popular Questions

Popular Tags

Trending Questions