Sites on X - Showcase and Code Sharing

Ask the community
5

Here’s the snippet:

import wixWindow from 'wix-window';
import { timeline } from 'wix-animations';


$w.onReady(function () {
    onScroll();
});


function onScroll() {
    let scrollY;


    wixWindow.getBoundingRect()
        .then((windowSizeInfo) => {
            scrollY = windowSizeInfo.scroll.y;
            let windowHeight = windowSizeInfo.window.height;
            let oldY = 0;
            let scrollStart1 = windowHeight * 2;
            var scrollEnd1 = windowHeight * 3;
            var scrollRange1 = scrollEnd1 - scrollStart1;
            if (scrollY != oldY) {
                ////////////////////////////////////////////////////BOXES ANIMATION///////////////////////////////////////////////////////////////////////


                if (scrollY > scrollStart1 && scrollY < scrollEnd1) {


                    let scrollDiff2 = Math.abs(scrollY - scrollStart1);
                    let moveDown = (scrollDiff2 / scrollRange1) * windowHeight;
                    let moveUp = -((scrollDiff2 / scrollRange1) * windowHeight);


                    timeline().add($w('#text1'), { y: moveDown, duration: 100, easing: "easeLinear" }).play();
                    timeline().add($w('#text2'), { y: moveUp, duration: 100, easing: "easeLinear" }).play();


                } else if (scrollY <= scrollStart1) {
                    timeline().add($w('#text1'), { y: 0, duration: 200 }).play();
                    timeline().add($w('#text2'), { y: 0, duration: 200 }).play();
                } else {
                    timeline().add($w('#text1'), { y: scrollEnd1, duration: 200 }).play();
                    timeline().add($w('#text2'), { y: -scrollEnd1, duration: 200 }).play();
                }
            }
            oldY = scrollY;
        })
    setTimeout(() => {
        onScroll();
    }, 100)
}

You can see it by scrolling down on this website and clicking on See Snippet.