Gamote / lottie-react

A lightweight React library for rendering complex After Effects animations in real time using Lottie.
https://lottiereact.com
Other
790 stars 59 forks source link

Interactive scroll animation stops #50

Open reptar25 opened 2 years ago

reptar25 commented 2 years ago

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 commented 1 year ago

85 it would help