react-scrollmagic icon indicating copy to clipboard operation
react-scrollmagic copied to clipboard

Can I pass a value to a scene to update the progress?

Open jjrchrds opened this issue 3 years ago • 2 comments

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

jjrchrds avatar Aug 15 '21 01:08 jjrchrds

solved?

andychoww avatar Jan 11 '22 07:01 andychoww

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 with style={{height: SCENE_DURATION, position: relative}}
  • then use anchor links within the <div> with absolute positioning and top styles that will place them at the correct position to update the progress where you want it to go.
  • Then, assign refs 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.

andosteinmetz avatar Feb 07 '22 22:02 andosteinmetz