LIVE SITE

Multiple Scroll Animation

Scroll, All interactions

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) {

                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)

}

Explore more Hover interactions 

Appearing Hot Dog

Jonathan Tsodikovitch

Shop Now

Appearing Hot Dog

Jonathan Tsodikovitch

Shop Now

Add a Title

Add a Title

Tags

Sites on X | © 2021 made with ❤️ on Editor X.