Question 269424 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Getting Lottie from this Codepen to also work from VSCode

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search