Interactivity Scroll, within a position "sticky" or "fixed" element.

[DevMemberR]

Loving this package. When using mode"scroll" for useLottieInteractivity, Is there a way to continue a scroll driven animation, when the element's position is set to "sticky" or "fixed" I understand that the element is not technically scrolling at the point of sticking, but is there a way to reference the scroll position of other element to control the animation?

[nika-ma]

Have you been able to solve this problem? I'm also facing the same issue...

[DevMemberR]

Sadly not, I waited so long for someone to run in to this and then missed the question. My idea at the time was to deliver frames using react-spring interpolation for scroll based frame animations.

[scottomoffatt]

There is a work around if someone else stumbles on this issue.
You can define another element with a container id for scroll reference.
and position the Lottie element however.
const interactivity = { mode: "scroll", container: "#in-view", actions: [ { visibility: [-0.2, 1.0], type: "seek", frames: [0, 60], }, ] }
Add the id to another element which will act as the reference.
`<div style={{position: 'static', height : '100vh', display: 'flex', flexWrap: 'wrap' alignItems: 'flex-start' }}>
<Lottie style={{position: 'sticky', top: '0' }}/>

` The div "in-view" will scroll normally within the viewport and Lottie will continue to seek frames while the reference div is in view.

[Kevin-Shiuan]

But the interactivity prop does not accept the attribute 'container' in typescript, even I try to @ts-ignore and let it pass into it, it take not effect on the Lottie, not sure if I did something wrong or misunderstanding the work around method.

[scottomoffatt]

I took a second look and yeah "container: " was not passing . On face value I assumed it was working as it was triggering the animation same time that object came into the viewport, totally coincidental! I've since altered my own work around. Currently my lottie div is "position: sticky" "fixed" won't work. I set the svg to 'fixed' and that is working for me. So looks like the lottie div needs to be the reference position within the scroll of the viewport.