I'm finding that parallaxed elements further down pages, depending on page lengths can get wildly different translate values (to the point where they're not even visible sometimes). Even with center: true
I find this library works great for items near the top of pages but I'm finding it really tricky when working with elements that could be near the bottom of an article for example or in the footer (my screenshots example).
I love this library and feel it has a great use case, but I would love to see an option whereby you can set a scroll container... where it only translates the element within the bounds of that scroll container. I.e. in my case here it'd be the footer element, I only want to start translating my elements when the footer is in view, not based on body scroll which can be vastly different on each page. It seems quite expensive in terms of performance too as there is no need to translate elements out of view all of the time.
I know this could take a great deal of work to look into or might not be possible, which is understandable. Just thought I'd put my thoughts down to see if anyone else experiences the same or has any solutions. I've used this library on 4-5 projects now and had the same issue every time.
Longer page - same values:
Shorter page - same values:
I'm finding that parallaxed elements further down pages, depending on page lengths can get wildly different translate values (to the point where they're not even visible sometimes). Even with center: true
I find this library works great for items near the top of pages but I'm finding it really tricky when working with elements that could be near the bottom of an article for example or in the footer (my screenshots example).
I love this library and feel it has a great use case, but I would love to see an option whereby you can set a scroll container... where it only translates the element within the bounds of that scroll container. I.e. in my case here it'd be the footer element, I only want to start translating my elements when the footer is in view, not based on body scroll which can be vastly different on each page. It seems quite expensive in terms of performance too as there is no need to translate elements out of view all of the time.
I know this could take a great deal of work to look into or might not be possible, which is understandable. Just thought I'd put my thoughts down to see if anyone else experiences the same or has any solutions. I've used this library on 4-5 projects now and had the same issue every time.
Longer page - same values:
Shorter page - same values:
