HOW TO CREATE AN INFINITE SCROLLING TEXT EFFECT ⤵

import wixWindow from 'wix-window';

import wixAnimations from 'wix-animations';

 

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

let animationIsPaying = true;

 

$w.onReady(function () {

animateText();

});

 

function animateText() {

const textToAnimate01 = $w('#textToAnimate01');

const textToAnimate02 = $w('#textToAnimate02');

 

getWindowWidth().then(windowWidth => {

console.log(windowWidth)

const textWidth = getAnimatedElementWidth(windowWidth);

 

wixAnimations.timeline()

.add(textToAnimate02, { x: textWidth, duration: 0 }) // Initial animation

.play()

.onComplete(() => {

repetitiveTextAnimation // Repetitive animation

.add(textToAnimate01, { x: -textWidth, duration: 20000, easing: 'easeLinear' })

.add(textToAnimate02, { x: 0, duration: 20000, easing: 'easeLinear' }, 0)

.play()

})

})

 

}

 

function getAnimatedElementWidth(windowWidth) {

if (windowWidth >= 1001) { return 2075 } // Desktop

if (windowWidth <= 1000 && windowWidth >= 751) { return 1244 } // Tablet

if (windowWidth <= 750) { return 995 } // Mobile

}

 

async function getWindowWidth() {

return await wixWindow.getBoundingRect()

.then((windowSizeInfo) => {

return windowSizeInfo.window.width;

});

}

 

export function playAnimationBtn_click(event) {

repetitiveTextAnimation.pause()

animationIsPaying ? repetitiveTextAnimation.pause() : repetitiveTextAnimation.play();

animationIsPaying = !animationIsPaying;

}

 

export function textAnimationSection_viewportEnter(event) {

// You need to create this function inside the editor (after you have created it you will make sure that the ID name is the same as the function name)

if (!animationIsPaying) {

repetitiveTextAnimation.play()

animationIsPaying = !animationIsPaying;

}

}

 

export function textAnimationSection_viewportLeave(event) {

// You need to create this function inside the editor (after you have created it you will make sure that the ID name is the same as the function name)

if (animationIsPaying) {

repetitiveTextAnimation.pause()

animationIsPaying = !animationIsPaying;

}

}