search

dixonandmoe / rellax

Lightweight, vanilla javascript parallax library
https://dixonandmoe.com/rellax/
MIT License
7.07k stars 877 forks source link

relativeToWrapper bugfix #240

Closed jakobwiens7 closed 11 months ago

jakobwiens7 commented 2 years ago

Added a condition to make sure scroll event listeners are not being applied to the wrapper element if relativeToWrapper is true. This fixes issue #170 .

cvillalobos commented 2 years ago

Has anyone else tested this fix? As for me, the animation is still happening on the element even if it is not within the viewPort. This is my initialization:

var parallaxSlider = new Rellax('.rellax'
    , {
      speed: -2,
      center: true,
        wrapper: '.custom-element',
        relativeToWrapper: true,
      round: false,
      vertical: true,
      horizontal: false,
      breakpoints:[576, 768, 1201]
    });

And still, the animate() function executes and so the image gets hidden due to the scrolling action.

Screen Shot 2022-03-21 at 4 08 07 PM 1
jakobwiens7 commented 2 years ago

That's correct, the animation is still happening outside of the viewport. From my understanding its just the values of speed and percentage that are relative to the wrapper element when using wrapper and relativeToWrapper.

However, without this fix there would be no animation at all, since the scroll listener initially was being applied to the wrapper element and thus listens for some scrolling action happening inside of it. I may be wrong, but i think this feature just doesn't work the way one would expect it to, unfortunately.

cvillalobos commented 2 years ago

Oh ok, I got your point. Agree with your solution proposed. Indeed, the custom wrapper does not seem to work as one will expect.

Actually, I have coded a new attribute within the library so the animation takes place only lead by the ViewPort area. This is configurable as needed. If you want to check my proposal here is the link to the PR: New configurable 'leadByViewPort' attribute