LIVE SITE

The work - running text

Slideshow, All interactions

import wixWindow from 'wix-window';



$w.onReady(function () {

  


    //nav animation first line

    const news01Container = $w('#newsStrip01');


    const news02Container = $w('#newsStrip02');


    const news01Timeline = wixAnimations.timeline({


        repeat: -1,


    });


    const news02Timeline = wixAnimations.timeline({


        repeat: -1,


    });


    getWindowSizes().then((winWidth) => {


        news01Timeline


            .add(news01Container, { x: -winWidth, duration: 25000, easing: 'easeLinear' })


            .add(news01Container, { x: winWidth, duration: 0, easing: 'easeLinear' })


        news02Timeline


            .add(news02Container, { x: -winWidth, duration: 25000, easing: 'easeLinear' })


            .add(news02Container, { x: winWidth, duration: 0, easing: 'easeLinear' })


        news01Timeline.play();


        news01Timeline.onStart(() => {


            setTimeout(() => {


                news02Timeline.play();


            }, 12500)


        });


    });


    // nav animation second line

    const news03Container = $w('#newsStrip03');


    const news04Container = $w('#newsStrip04');


    const news03Timeline = wixAnimations.timeline({


        repeat: -1,


    });


    const news04Timeline = wixAnimations.timeline({


        repeat: -1,


    });


    getWindowSizes().then((winWidth) => {


        news03Timeline


            .add(news03Container, { x: winWidth, duration: 25000, easing: 'easeLinear' })


            .add(news03Container, { x: -winWidth, duration: 0, easing: 'easeLinear' })


        news04Timeline


            .add(news04Container, { x: winWidth, duration: 25000, easing: 'easeLinear' })


            .add(news04Container, { x: -winWidth, duration: 0, easing: 'easeLinear' })


        news03Timeline.play();


        news03Timeline.onStart(() => {


            setTimeout(() => {


                news04Timeline.play();


            }, 12500)


        });


    });


    // nav animation third line

    const news05Container = $w('#newsStrip05');


    const news06Container = $w('#newsStrip06');


    const news05Timeline = wixAnimations.timeline({


        repeat: -1,


    });


    const news06Timeline = wixAnimations.timeline({


        repeat: -1,


    });


    getWindowSizes().then((winWidth) => {


        news05Timeline


            .add(news05Container, { x: -winWidth, duration: 25000, easing: 'easeLinear' })


            .add(news05Container, { x: winWidth, duration: 0, easing: 'easeLinear' })


        news06Timeline


            .add(news06Container, { x: -winWidth, duration: 25000, easing: 'easeLinear' })


            .add(news06Container, { x: winWidth, duration: 0, easing: 'easeLinear' })


        news05Timeline.play();


        news05Timeline.onStart(() => {


            setTimeout(() => {


                news06Timeline.play();


            }, 12500)


        });


    });



});


function getWindowSizes() {


    return wixWindow.getBoundingRect()


        .then((windowSizeInfo) => {


            return windowSizeInfo.window.width;


        });


}

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.