goToAndPlay is not a function?

Lottie in Web
1

Hi I have a tough time using the goToAndPlay object for Lottie. My console keeps telling me that “it’s not a function”. I’m using the latest Lottie-interact and Lottie-player libraries. Does anyone else get this issue? Thanks in advance.

Mike

2

I’d really just like a Lottie to play on click and stop at its ending frame- plus be chained by animation markers exported from After Effects…

3

Hey, Mike, this might help you but not sure. Here is a link to my sample page for applying job. You can go through the code.

4

Hi, Vijay. Your work looks really nice but I do require the goToAndPlay function for my project and I can’t see that in the code you sent. I appreciate your effort

5

Yes, I didn’t used, I used easy way. could you share your JavaScript code?

6

Yes, I found a work around solution by extracting code from the linked Codepen. It doesn’t use the Lottie-player element like you are but it plays in the behavior I need.

[Codepen](https://codepen.io/mikes1025/pen/RwEzbQP?editors=1111)

Now I just have to find a way for other animation markers to play within the Lottie respective to button clicks. It seems to me that the Lottie starts on the DOMLoaded event so I tried creating a CustomEvent that activates by a button click to replace the function argument: "DOMLoaded".

I succeeded in creating the event but I did not succeed in getting a Lottie play by its activation

1 Like
7

Okay, have you tried DOMContentLoaded instead DOMLoaded?

8

Hi, @mikes1025 hope this solution helps:

<html lang="en">

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

        .container {
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="container"></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';

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


        animation.addEventListener("DOMLoaded", () => {
            animation.goToAndPlay('bird', true);
        });
        function playOnClick(anim, frames) {
            switch (frames) {
                case 'bird':
                    anim.goToAndPlay(frames, true);
                    break;
                case 'explosion':
                    anim.goToAndPlay(frames, true);
                    break;
                case 'feather':
                    anim.goToAndPlay(frames, true);
                    break;
                default:
                    break;
            }

        }
        container.addEventListener('click', () => {
            playOnClick(animation, 'feather');
            animation.addEventListener('loopComplete', () => {
                playOnClick(animation, 'bird');
            });
        });


    </script>
</body>

</html>
9

@vijaypwr61 thank you! This is interesting and short. I am set on an issue that was months long and happy!

10

No problem at all, pleasure to help LottieFiles community. This might help someone. :pray:t3: :smiley:

11

Ensure Lottie libraries are correctly imported and syntax for goToAndPlay is used properly.