LIVE SITE

Running Text Animation

Slideshow, Scroll, Micro Animation, All interactions

import wixAnimations from 'wix-animations';

import wixWindow from 'wix-window';


const runningTxt = wixAnimations.timeline({ repeat: -1 });


$w.onReady(function () {

    playRunningTxt();


    function playRunningTxt() {

        let sliderWidth;


        wixWindow.getBoundingRect()

            .then((windowSizeInfo) => {

                let windowWidth = windowSizeInfo.window.width;


                if (windowWidth > 1000) {

                    //Desktop

                    sliderWidth = 5000 / 3;

                } else if (windowWidth >= 751) {

                    // Tablet

                    sliderWidth = 4050 / 3;

                } else if (windowWidth <= 750) {

                    // Mobile

                    sliderWidth = 3350 / 3;

                }


                runningTxt

                    .add($w('#runningTxt'), { x: -sliderWidth, duration: 10000, easing: 'easeLinear' }).play();

            });


        $w('#txtSection').onViewportEnter(() => {

            runningTxt.play();

        });


        $w('#txtSection').onViewportLeave(() => {

            runningTxt.pause();

        });

    }

});


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.