search

LottieFiles / lottie-interactivity

A small javascript library to enable interactivity with Lottie animations
https://lottiefiles.com/interactivity
MIT License
430 stars 55 forks source link

Uncaught exception Error #113

Closed WangShuan closed 1 year ago

WangShuan commented 1 year ago

Hi,

I executed the sample code using cdn according to the official documentation

But getting error as below:

Uncaught TypeError: W.getLottie is not a function
     at new e (lottie-interactivity.js:21:25)
     at Object.C (lottie-interactivity.js:970:20)
     at index.html:16:25

It seems that there is a problem with the content of the cdn, which prevents the code from being executed correctly. In addition, this issue was raised in lottie-web some time ago.

Any kind of help is welcome, thank you!

samuelOsborne commented 1 year ago

hi @WangShuan can you please add a 'ready' event listener on your player, then execute your code:

const player = getElementById("...");

player.addEventListener('ready', () => {

   create(...)

});
WangShuan commented 1 year ago

Hi @samuelOsborne , Thank you for response soon!

This is my code:

  <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

  <lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json" style="width:400px; height: 400px;"></lottie-player>

  <script>
    const player = document.querySelector('#firstLottie')
    player.addEventListener('ready', () => {
      LottieInteractivity.create({
        player: '#firstLottie',
        mode: 'scroll',
        actions: [
          {
            visibility: [0, 1],
            type: 'seek',
            frames: [0, 300],
          },
        ]
      });
    })

  </script>

The error is missing now, But not anything display in my document now, too. :(

samuelOsborne commented 1 year ago

@WangShuan Even when you scroll ?

WangShuan commented 1 year ago

@samuelOsborne

Yes, All my code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .seth {
      height: 300vh;
    }

    #firstLottie {
      position: fixed;
      top: 50px;
      left: 50px;
    }
  </style>
  <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
</head>

<body>
  <div class="seth">
    <lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json" style="width:400px; height: 400px;">
    </lottie-player>
  </div>

  <script>
    const player = document.querySelector('#firstLottie')
    player.addEventListener('ready', () => {
      LottieInteractivity.create({
        mode: 'scroll',
        player: '#firstLottie',
        actions: [
          {
            visibility: [0, 1],
            type: 'seek',
            frames: [0, 100],
          },
        ],
      });
    })
  </script>
</body>

</html>

Is anything I missing or need to change?

samuelOsborne commented 1 year ago

@WangShuan Have you got a script tag that loads the lottie-player? Or is loaded somewhere else? cant see it there

WangShuan commented 1 year ago

@samuelOsborne Sorry, I didn't import that. Is <script src="https://unpkg.com/@lottiefiles/lottie-player@1/dist/lottie-player.js"></script> ?

I just follow https://lottiefiles.com/interactivity and it not say you need to add lottie-player.

now I add lottie-player in head, and my page can see the tree, but when I scroll page still not move animation, why?

WangShuan commented 1 year ago

@samuelOsborne Hi, I know what happen now, it is because the style, I added some p and remove all style, then I can see tree moving when scrolling page now.

Thank you for your time!