Velo animations do not automatically play on mobile

Discussion Ask a question
1

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: Introduction - Velo API Reference - Wix.com
// “Hello, World!” Example: Velo Learning Center
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’
})
2

Actually the same thing happens on Desktop as well. How do I get the code to play on load?

3

Issue related: “Safari back button does not reload page” (Google it)

As the page are not reloaded, the code are treated as done already.

4

I’ll Google that, thank you so much! Can you clarify just a little more for me? Thanks in advance😊

5

To clarify, it is not a problem with the back button. The problem is that when you first land on the site, it doesn’t seem to run the code. But when I go to another page on the site like say the about page, then I press the logo at the top to return to the Home page, the code runs. It’s like the initial launch to the site is the issue for some reason. The code won’t run unless it’s already on the domain. Is there an issue with the way I structured the code? Thanks

6

Can someone please help? It seems like this should not be a problem and no one is helping me figure this out. I’ve reached out to Wix and they still have not gotten back to me yet.