jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.3k stars 2.26k forks source link

Viewport issue on slider #567

Open zborkala opened 7 months ago

zborkala commented 7 months ago

https://github.com/jlmakes/scrollreveal/assets/69580797/591fd11f-e3ab-4030-9b88-664ce7766582

Replacing the following lines in isElementVisible() function solves the problem of viewport issue on slider.

function isElementVisible(element) {
    ...
    var elementRect = element.node.getBoundingClientRect();
    var geoBounds = element.geometry.bounds;
    var highestBound = {
        left: Math.min(elementRect.left, geoBounds.left),
        right: Math.max(elementRect.right, geoBounds.right),
        top: Math.max(elementRect.top, geoBounds.top),
        bottom: Math.max(elementRect.bottom, geoBounds.bottom),
    }

    var elementBounds = {
        top: highestBound.top + element.geometry.height * viewFactor,
        right: highestBound.right - element.geometry.width * viewFactor,
        bottom: highestBound.bottom - element.geometry.height * viewFactor,
        left: highestBound.left + element.geometry.width * viewFactor
    };
    ....
}

https://github.com/jlmakes/scrollreveal/assets/69580797/32b2e091-6f58-4598-83f0-434b9aa8fd52

But, you have to call ScrollReveal().delegate() function on the corresponding event listeners. Because ScrollReveal.js only works on scroll and resize event.