Please need your help for codding

Discussion Ask a question
1

I am a beginner :slight_smile: and I would like to know how to add in my website the code JS of an element that works with a JS code

I have already an another code JS for an another animation.

how do I write it so that it works both ?

You will find below my first code for and my second code

Thank you :slight_smile:

First code

mport wixWindow from ‘wix-window’ ;
import wixAnimations from ‘wix-animations’ ;

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

$w . onReady ( function () {
animateText ();
});

function animateText ( ) {
const textToAnimate01 = $w ( ‘#animateText01’ );
const textToAnimate02 = $w ( ‘#animateText02’ );
const speed = 20000 ;

getWindowWidth (). then ( windowWidth => {
console . log ( ‘Widnow width is:’ , windowWidth )
const textWidth = getAnimatedElementWidth ( windowWidth );

wixAnimations . timeline ()
. add ( textToAnimate02 , { x : textWidth , duration : 0 }) // Initial animation
. play ()
. onComplete (() => {
repetitiveTextAnimation
. add ( textToAnimate01 , { x : - textWidth , duration : speed , easing : ‘easeLinear’ })
. add ( textToAnimate02 , { x : 0 , duration : speed , easing : ‘easeLinear’ }, 0 )
. play ()
})
})
}

function getAnimatedElementWidth ( windowWidth ) {
if ( windowWidth >= 1001 ) { return 2400 } // Desktop
if ( windowWidth <= 1000 && windowWidth >= 751 ) { return 1440 } // Tablet
if ( windowWidth <= 750 ) { return 1205 } // Mobile
}

async function getWindowWidth ( ) {
return await wixWindow . getBoundingRect ()
. then (( windowSizeInfo ) => {
return windowSizeInfo . window . width ;
});
}

let animationIsPaying = true ;
export function playAnimationBtn_click ( event ) {
repetitiveTextAnimation . pause ()
animationIsPaying ? repetitiveTextAnimation . pause () : repetitiveTextAnimation . play ();
animationIsPaying = ! animationIsPaying ;
}

export function textAnimationSection_viewportEnter ( event ) {
if (! animationIsPaying ) {
repetitiveTextAnimation . play ()
animationIsPaying = ! animationIsPaying ;
}

}

export function textAnimationSection_viewportLeave ( event ) {
if (! animationIsPaying ) {
repetitiveTextAnimation . pause ()
animationIsPaying = ! animationIsPaying ;
}

}

Second code

wixAnimations . timeline ({ repeat : - 1 })
. add ( $w ( ‘#vectorImage5’ ), { rotate : 360 , duration : 40000 , easing : ‘easeLinear’ })
. play ()