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

[dohomi]

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]

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]

@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]

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]

Thanks for the demo :-)