react-scrollmagic
react-scrollmagic copied to clipboard
Can I pass a value to a scene to update the progress?
docs say I can set the progress of a scene, but can't seem to figure out how to to do it w react-scrollmagic
solved?
I was also looking for this and couldn't find a way, at least not without forking the library.
An alternative method that worked for me is to:
- set
pinSettings={pushFollowers: false}
on the<Scene>
- follow the scene by a
<div>
element withstyle={{height: SCENE_DURATION, position: relative}}
- then use anchor links within the
<div>
with absolute positioning andtop
styles that will place them at the correct position to update the progress where you want it to go. - Then, assign
ref
s to the anchor links, and scroll to those links programatically as needed with -
window.scrollTo(ref.current.getBoundingClientRect().top + window.scrollY)
A bit of a hack but, if you were motivated you could abstract this into a component of its own.