Open reptar25 opened 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
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:
Expected behavior The animation should continue playing while the user is scrolling.
Additional context Code sandbox example