Lottie interactivity scroll not working

1

Hi, does anyone know why lottie interactivity scroll is not working. I have it working in a plain react app, but in F7 it does not work. I think it has to do with the Page compnent.

2

Can you share a sandbox link?

3

If only I knew how to upload a lottie json file to codesandbox?

Best I can do is the code:

import smileEmoji from "../../assets/lotties/emoji/smile.json";
const style = {
    height: 300,
    border: 3,
    borderStyle: "solid",
    borderRadius: 7,
};

const Example = () => {
    const lottieObj = useLottie({
        animationData: smileEmoji,
        onScroll: (e) => console.log(e)
    }, style);
    const Animation = useLottieInteractivity({
        lottieObj,
        mode: "scroll",
        actions: [
            {
                visibility: [0, 0.45],
                type: "stop",
                frames: [0],
            },
            {
                visibility: [0.45, 1.0],
                type: "seek",
                frames: [0, 140],
            },

        ],
    });

    return Animation;
};

const TestPage = () => {

    return <Page>
        <Navbar title="Test stuff" backLink="Back" />
        <div style={{ height: 800 }}></div>
        <Example />
        <div style={{ height: 800 }}></div>

    </Page>;
}
4

my solution

in app.js
import ‘https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs’;

in template file

export default (props, { $f7, $update, $on }) => {

$on('pageInit', () => {
  let player = document.querySelector("dotlottie-player");

  window.onload = function(){
      player.play();
  }

…