search

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.86k stars 158 forks source link

Feature Request: rootMargin currently only supports number and not percentage values #157

Open dohomi opened 2 years ago

dohomi commented 2 years ago

I would love to trigger the scroll animation when the middle of a screen is passed (animated timeline with connector). This currently seems not be able because rootMargin is bind to top, left, bottom, right and all values seems to be number (pixel) only.

Do you have a solution to start the scroll animation in the middle of the viewport?

jscottsmith commented 2 years ago

Ya, I'll have to think about this some more because I'm not sure rootMargin is the right API to adapt for this. Currently it works by adding a margin around an element so that it appears to enter earlier or leave later. In your case the percent would be based off the view (scroll window). If we did go this route, you'd need to do something like rootMargin: [-50%, 0, 0, 0]. This feels odd.

Maybe a new configuration option should be created. Something like viewportSize that would effectively scale the scroll view to the area where you want to animate. In your case viewportSize: [0 0, 50%, 0] -- 50% from the bottom of the view, begin the scroll animation.

In the meantime you may want to just use a targetElement. Here's a not so perfect example but may help https://codesandbox.io/s/react-scroll-parallax-start-at-center-5r1vsw?file=/src/styles.css

dohomi commented 2 years ago

@jscottsmith thanks for your explanation. I am currently unsure if this package actually is the right one to have this timeline effect as shown in for example in this demo: https://codesandbox.io/s/brave-kepler-fdbzv?file=/src/App.js:0-1097 as I use already the react-scroll-parallax I thought I could reduce some bundle size but wasn't yet successful

jscottsmith commented 2 years ago

I see. Ya you may be able to achieve that but it could be a little tricky. I tried mocking something up using startScroll and endScroll which you'd have to calculate manually to fit your needs:

https://codesandbox.io/s/react-scroll-parallax-view-progress-0h7r00?file=/src/App.tsx

But you may be better off with just another package ;)

dohomi commented 2 years ago

Thanks for the demo :-)