goToAndPlay is not a function?

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.


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…

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.

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

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

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.


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

Okay, have you tried DOMContentLoaded instead DOMLoaded?

Hi, @mikes1025 hope this solution helps:

<html lang="en">

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

        .container {
            height: 100vh;

    <div id="container"></div>
    <script src=""
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>


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

        var jsonPath = '';

        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);
                case 'explosion':
                    anim.goToAndPlay(frames, true);
                case 'feather':
                    anim.goToAndPlay(frames, true);

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



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

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

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