search

ryanhefner / react-scroll-trigger

📜 React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.
https://www.pkgstats.com/pkg:react-scroll-trigger
MIT License
129 stars 17 forks source link

How to use onProgress? #115

Closed MorganJLTech closed 5 years ago

MorganJLTech commented 5 years ago

Hi,

I'm enjoying this package a lot, even with just onEnter and onExit it's been incredibly useful. However I want to start doing some more complex stuff with scroll progressions, but I'm not sure how to use them. I realize it calls a function, but how do I tell that function what the progress through the window is? Shouldn't it be an argument that passes the scroll value to the function, allowing for if statements to toggle my state?

Sorry if that is confusing, just trying to understand. Please ask if you need clarification :)

ryanhefner commented 5 years ago

Hey, I apologize for the delayed response. Within your handler, you can reference the progress value that is passed.

scrollProgressHandler({ progress }) {
   // Do something with `progress`
}

Progress will be a value between 0 and 1, so kind of like the percentage of the container/page/whatever through the viewport. So, if you wanted to animate something between 0.25 and 0.75, you could do something like this.

scrollProgressHandler({ progress }) {
  if (progress >= 0.25 && progress <= 0.75) {
    // Animate or change something here.
  }
}

I hope that makes sense. Please let me know if you have any other questions. And, feel free to re-open this ticket if that doesn’t full answer your question.

Thanks!