Velo animations do not automatically play on mobile

xxnarutoball-zxx · August 20, 2022, 11:34pm

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 ;

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’
})

xxnarutoball-zxx · August 20, 2022, 11:37pm

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

Certified_Code · August 21, 2022, 1:16pm

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

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

xxnarutoball-zxx · August 21, 2022, 9:57pm

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

xxnarutoball-zxx · August 21, 2022, 10:02pm

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

xxnarutoball-zxx · August 22, 2022, 2:55pm

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.

Topic		Replies	Views
Code not working on live site Ask the community code , question	3	111	January 28, 2022
Code for showing elements on mobile only doesnt work Ask the community code , question	11	808	July 9, 2019
Transparent + VideoBox Not Always Playing Ask the community wix-studio , code	5	72	October 27, 2024
Error with Velo Tutorial Ask the community wix-studio , code , question	13	106	February 1, 2024
Velo on desktop vs mobile Ask the community code , question	4	250	July 21, 2022

Velo animations do not automatically play on mobile

Related topics