Velo animations do not automatically play on mobile.

Hello! I am having an issue with my Wix Velo code. For some reason, my code does not automatically start running when the site is on mobile. If I go to another page on the site however then return to the main page, the code in question runs no problem.

And I think I'm seeing a theme here after trying to research this topic. But yes, on Desktop the code runs perfectly and runs as soon as you visit the site. But for some reason on mobile, there's this freeze. Can someone please help? I'm assuming it could possibly be because I declare variables outside of the onReady() function?

Site: Lohxxx. co

Code:

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction // “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world import wixAnimations from 'wix-animations'; import { timeline } from 'wix-animations'; import wixWindow from 'wix-window'; let devType = wixWindow.formFactor; let spotLightIn = wixAnimations.timeline(); let boxMoveOne = timeline({ repeat: -1, repeatDelay: 2800 }); let boxMoveTwo = timeline({ repeat: -1, repeatDelay: 1500 }); let boxMoveThree = timeline({ repeat: -1, repeatDelay: 3900 }); let boxMoveFour = timeline({ repeat: -1, repeatDelay: 4600 }); let boxMoveFive = timeline({ repeat: -1, repeatDelay: 2500 }); let boxMoveSix = timeline({ repeat: -1, repeatDelay: 3300 }); let boxMoveSeven = timeline({ repeat: -1, repeatDelay: 1900 }); let featherFall = timeline(); let gearTurn = timeline({ repeat: -1 }); let birdFlightOne = timeline(); let ringOneRotate = timeline({repeat: -1}); let ringTwoRotate = timeline({repeat: -1}); let ringThreeRotate = timeline({repeat: -1}); let scrollingTextLTR = timeline({repeat: -1}); const mainImage = $w('#mImage'); const spotBox = $w('#spotlightBox'); let spotBoxParamA = 0; let spotBoxParamB = 0; const gBoxOne = $w('#gBox1'); const gBoxTwo = $w('#gBox2'); const gBoxThree = $w('#gBox3'); const gBoxFour = $w('#gBox4'); const gBoxFive = $w('#gBox5'); const gBoxSix = $w('#gBox6'); const gBoxSeven = $w('#gBox7'); const featherOne = $w('#feather'); let featherReplayParam = 0; const gearOne = $w('#gearOne'); const bFlyingOne = $w('#birdFlying1'); const birdSenseOne = $w('#text107'); //#birdStrip1 let birdReplayParam = 0; const ringOne = $w('#ringOne'); const ringTwo = $w('#ringTwo'); const ringThree = $w('#ringThree'); const ecoStrip = $w('#columnStrip15'); const scrollText = $w('#scrollingText'); $w.onReady(function () { // Write your JavaScript here boxMoveOne.add(gBoxOne, { duration: 0, opacity: 0 }).add(gBoxOne, { x: 500, duration: 1200, opacity: 1.0, easing: 'easeLinear' }, '+=300').add(gBoxOne, { x: '+=500', duration: 1200, opacity: 0, easing: 'easeLinear' }).play(); boxMoveTwo.add(gBoxTwo, { duration: 0, opacity: 0 }).add(gBoxTwo, { x: 600, duration: 800, opacity: 1.0, easing: 'easeLinear' }, '+=1200').add(gBoxTwo, { x: '+=600', duration: 800, opacity: 0, easing: 'easeLinear' }).play(); boxMoveThree.add(gBoxThree, { duration: 0, opacity: 0 }).add(gBoxThree, { x:450, duration: 1300, opacity: 1.0, easing: 'easeLinear' }, '+=900').add(gBoxThree, { x: '+=450', duration: 1300, opacity: 0, easing: 'easeLinear' }).play(); boxMoveFour.add(gBoxFour, { duration: 0, opacity: 0 }).add(gBoxFour, { x: 500, duration: 1900, opacity: 1.0, easing: 'easeLinear' }, '+=1200').add(gBoxFour, { x: '+=500', duration: 1900, opacity: 0, easing: 'easeLinear' }).play(); boxMoveFive.add(gBoxFive, { duration: 0, opacity: 0 }).add(gBoxFive, { x: 500, duration: 700, opacity: 1.0, easing: 'easeLinear' }, '+=250').add(gBoxFive, { x: '+=500', duration: 700, opacity: 0, easing: 'easeLinear' }).play(); boxMoveSix.add(gBoxSix, { duration: 0, opacity: 0 }).add(gBoxSix, { x: 450, duration: 900, opacity: 1.0, easing: 'easeLinear' }, '+=800').add(gBoxSix, { x: '+=450', duration: 900, opacity: 0, easing: 'easeLinear' }).play(); boxMoveSeven.add(gBoxSeven, { duration: 0, opacity: 0 }).add(gBoxSeven, { x: 380, duration: 700, opacity: 1.0, easing: 'easeLinear' }, '+=450').add(gBoxSeven, { x: '+=380', duration: 700, opacity: 0, easing: 'easeLinear' }).play(); gearTurn.add(gearOne, { duration: 3000, rotate: '+=360', easing: 'easeLinear' }).play(); ringOneRotate.add(ringOne, { duration: 18000, rotate: '+=360', easing: 'easeLinear' }); ringTwoRotate.add(ringTwo, { duration: 12000, rotate: '-=360', easing: 'easeLinear' }); ringThreeRotate.add(ringThree, { duration: 21000, rotate: '+=360', easing: 'easeLinear' }); if (devType === "Mobile") { featherFall.add(featherOne, { duration: 0, opacity: 0 }).add(featherOne, { x: -100, y: 40, duration: 800, opacity: 1, easing: 'easeLinear' }, '+=500').add(featherOne, { x: '-=100', y: '+=40', duration: 800, opacity: 1, easing: 'easeLinear' }).add(featherOne, { x: '-=100', y: '+=40', duration: 800, opacity: 0, easing: 'easeLinear' }); } else { featherFall.add(featherOne, { duration: 0, opacity: 0 }).add(featherOne, { x: -350, y: 120, duration: 1500, opacity: 1, easing: 'easeLinear' }, '+=500').add(featherOne, { x: '-=350', y: '+=120', duration: 1500, opacity: 1, easing: 'easeLinear' }).add(featherOne, { x: '-=350', y: '+=120', duration: 1500, opacity: 0, easing: 'easeLinear' }); } if (devType === "Mobile") { birdFlightOne.add(bFlyingOne, { duration:0, opacity: 0 }).add(bFlyingOne, { x: 100, y: -20, duration: 400, opacity: 1, easing: 'easeLinear' }).add(bFlyingOne, { x: '+=100', y: '-=20', duration: 400, opacity: 1, easing: 'easeLinear' }).add(bFlyingOne, { x: '+=100', y: '-=20', duration: 400, opacity: 0, easing: 'easeLinear' }); } else { birdFlightOne.add(bFlyingOne, { duration:0, opacity: 0 }).add(bFlyingOne, { x: 350, y: -60, duration: 700, opacity: 1, easing: 'easeLinear' }).add(bFlyingOne, { x: '+=350', y: '-=60', duration: 700, opacity: 1, easing: 'easeLinear' }).add(bFlyingOne, { x: '+=350', y: '-=60', duration: 700, opacity: 0, easing: 'easeLinear' }); } spotLightIn.add(spotBox, { duration: 0, opacity: 0.5, scale: 0.5 }).play(); if (devType === "Mobile") { getWindowSize() .then((windowSize) => { let scrollAmount = windowSize.width; scrollingTextLTR.add(scrollText, { x: 400,//windowSize.width, duration: 0 }); scrollingTextLTR.add(scrollText, { x: -400,//-scrollAmount, duration: 8000, easing: 'easeLinear' }); scrollingTextLTR.play(); }); } else { getWindowSize() .then((windowSize) => { let scrollAmount = windowSize.width; scrollingTextLTR.add(scrollText, { x: windowSize.width, duration: 0 }); scrollingTextLTR.add(scrollText, { x: -scrollAmount, duration: 20000, easing: 'easeLinear' }); scrollingTextLTR.play(); }); } mainImage.onViewportEnter(() => { if (featherReplayParam === 0) { featherFall.play(); featherReplayParam = 1; } else { featherFall.replay(); } }); birdSenseOne.onViewportEnter(() => { if (birdReplayParam === 0) { birdFlightOne.play(); birdReplayParam = 1; } else { birdFlightOne.replay(); } }); $w('#column2').onViewportEnter(() => { spotOnScreen.play(); }); $w('#column2').onViewportLeave(() => { if (devType === "Mobile") { spotOnScreen.reverse(); } else { spotOffScreen.play(); spotOffScreen.onComplete(() => { spotBox.hide(); spotOffScreen.reverse(); spotOffScreen.onReverseComplete(() => { spotOnScreen.reverse(); spotOnScreen.onReverseComplete(() => { spotBox.show(); }); }); }); } }); ecoStrip.onViewportEnter(() => { ringOneRotate.play(); ringTwoRotate.play(); ringThreeRotate.play(); }); ecoStrip.onViewportLeave(() => { ringOneRotate.pause(); ringTwoRotate.pause(); ringThreeRotate.pause(); }); }); let spotOnScreen = timeline().add(spotBox, {duration: 800, scale: 1, opacity: 1, easing: 'easeInOutSine', }); function getWindowSize() { return wixWindow.getBoundingRect() .then((windowSize) => { return windowSize.window; }); } let spotOffScreen = timeline().add(spotBox, {duration: 1000, scale: 0.5, y: '+=1200', rotate: 720, opacity: 0, easing: 'easeLinear' })