Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive scroll animation stops #50

Open
reptar25 opened this issue Jan 26, 2022 · 1 comment
Open

Interactive scroll animation stops #50

reptar25 opened this issue Jan 26, 2022 · 1 comment

Comments

@reptar25
Copy link

reptar25 commented Jan 26, 2022

Describe the bug
The animation stops if the animation container position is 'sticky', but the animation only stops while the container is stuck.

To Reproduce
Steps to reproduce the behavior:

export default function App() {
  const style = {
    height: "94vh",
    border: "3px solid black",
    borderRadius: "10px",
    position: "sticky",
    top: "5vh"
  };
  const options = {
    animationData: groovyWalkAnimation
  };

  const lottieObj = useLottie(options, style);
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: "scroll",
    actions: [
      {
        visibility: [0.1, 0.9],
        type: "seek",
        frames: [0, 62]
      }
    ]
  });

  return (
    <>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <div style={{ height: "500vh", marginBottom: "1vh" }}>{Animation}</div>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
      <h1>lottie-react - Hook</h1>
    </>
  );
}

Expected behavior
The animation should continue playing while the user is scrolling.

Additional context
Code sandbox example

@lazarus2019
Copy link

#85 it would help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants