search

Stanko / react-plx

React parallax component, powerful and lightweight
https://muffinman.io/react-plx/
MIT License
687 stars 51 forks source link

Start + end 'self' values #54

Closed nathobson closed 2 years ago

nathobson commented 5 years ago

Hi!

Cool project and I'm enjoying the API for this, seems to be the most logical out of the React parallax libraries I've tried out.

My issues is around using 'self' as the value around start/end. Took me a little bit to realise that this wasn't working as these both are triggered when the element enters the viewport, causing no value to be read and obviously there is no difference and therefore no duration. This is in the docs to be fair!

However, I think to create something truly reusable and dynamic, when there's no friendly static value to be used, the end value really needs to be when the element exits the viewport. This way you could have something that is parallaxed but is in its origin position when it is in the center of the viewport. Currently, I can't think of a way to factor in the height of the element and combine that with the built in offset props; the end value is always going to be something arbitrary as I don't know exactly where an element will be on the page to pass an accurate end value.

Stanko commented 5 years ago

Hello @nathobson, Firstly, thank you! Honestly I had to open readme again to check what exactly are you talking about. And I think you are totally right, current system doesn't make much sense. I'll think of a way to refactor it.

For now, as a workaround you can use combination of end and endOffset props.

The simplest possible workaround is to set end: "self" and endOffset: "100vh" - animation will stop when element starts exiting the viewport.

https://codesandbox.io/s/react-plx-demo-wrcn8

The better solution, but a little bit more complicated is to set endOffset: window.innerHeight + elementHeight.

https://codesandbox.io/s/react-plx-demo-rkoh1

Cheers!

nathobson commented 5 years ago

Thanks for responding so quickly and appreciate the Codesandbox links :)

The issue I had with that kind of workaround (end: "self" and endOffset: "100vh") is that if the element is fairly tall, the effect would end as soon as it hits to top of the viewport, which looked kind of weird. For example, I was animating a background inside of a container which was around 600px tall. The result was the background was parallaxing nicely, then for those last 600px, it's scrolling normally. Kind of spoils the effect :)

The second option is great but gets a little tricky with several elements or multiple instances of the same component which are using parallaxed elements, each with different heights.

I guess ideally there would be a value that could be passed to the startOffset/endOffset that is the height of the element so that calculation becomes trivial or some other build in method to pull this off.

EDIT: You know what, I take that back; the second solution is pretty easy actually :)

Stanko commented 5 years ago

Hehe glad that works for you, you could make a dummy wrapper around Plx that does that. But I'll look into it and try to change API to make these things easier.