LIVE SITE

Arrow Scroll Animation

Scroll, All interactions

import wixWindow from 'wix-window';

import { timeline } from 'wix-animations';



$w.onReady(function () {

    onScroll();

});


let oldY = 0;

var scrollStart1 = 500;

var scrollEnd1 = 2500;

var scrollRange1 = scrollEnd1 - scrollStart1;


function onScroll() {

    let scrollY;


    wixWindow.getBoundingRect()

        .then((windowSizeInfo) => {

            scrollY = windowSizeInfo.scroll.y;

            if (scrollY != oldY) {

                ////////////////////////////////////////////////////BOXES ANIMATION///////////////////////////////////////////////////////////////////////


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


                    let scrollDiff2 = Math.abs(scrollY - scrollStart1);

                    let StackMove = (scrollDiff2 / scrollRange1) * 600;


                    timeline().add($w('#movingArrow'), { y: StackMove, duration: 100, easing: "easeLinear" }).play();


                } else if (scrollY <= scrollStart1) {

                    timeline().add($w('#movingArrow'), { y: 0, duration: 200 }).play();

                } else {

                    timeline().add($w('#movingArrow'), { y: 600, 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.