windowSizeInfo becomes 0 outise the scope

Ask the community
,
1

Hi, I am currently working on a site which needs 2 types of animation on hero section. While if the widow size is >1000 mouse tracking animation to run, and if the window size is < 1000 then an auto played animation should run in loop.

Now here is where i am stuck. I am trying to achieve this using a simple if construct. Where i am getting the windowWidth in a variable and then checking if it falls under the above conditions. Now the weird thing here is that the above set variable becomes 0 right outside the scope. "RIGHT WHERE IT SAYS —> "WW before IF: " + windowWidth <---- ". I am not really sure why is that happening. Since the variable is globally scoped.

Please help me out here. :pray:

const heroImagesTimeline = wixAnimations . timeline ();
let heroContainerVisible = false ;
let bigMovements , smallMovements ;
let windowWidth = 0 ;

$w . onReady ( function () {

console . log ( 'Inside Home_Page_Res.js' ); 

bigMovements  =  $w ( '#glass' ); 
smallMovements  =  $w ( '#imageX2, #imageX3, #imageX4, #imageX5' ); 

checkedIfHeroContainerIsVisible (); 
console . log ( 'Calling ifHeroVisible Function' ); 

        
wixWindow . getBoundingRect () 
. then ( ( windowSizeInfo ) => { 
    windowWidth  =  windowSizeInfo.window.width ; 
    console . log ( "Current window size: "  +  windowWidth ); 
} ); 

console . log ( "WW before IF: " + windowWidth ); 

**if** ( windowWidth >= 1000 ) 
{ 
    
    initCustomElement (); 
    console . log ( 'Calling the initCustomElement function' ); 
} 
**else** 
{ 
    heroImagesTimeline . pause (); 
    timeline ({ repeat : - 1 , yoyo : **true** }) 
    . add ( bigMovements , { x :  0 ,  y :  0 ,  scale :  1 ,  duration :  1000 ,  easing :  'easeOutQuad' }) 
    . add ( bigMovements , { x :  0 ,  y : - 5 ,  scale :  1 ,  duration :  1000 ,  easing :  'easeLinear' }) 
    . add ( bigMovements , { x :  5 ,  y : - 5 ,  scale :  1 ,  duration :  1000 ,  easing :  'easeLinear' }) 
    . add ( bigMovements , { x :  5 ,  y :  5 ,  scale :  1 ,  duration :  1000 ,  easing :  'easeLinear' }) 
    . add ( bigMovements , { x : - 5 ,  y :  5 ,  scale :  1 ,  duration :  1000 ,  easing :  'easeLinear' }) 
    . add ( bigMovements , { x : - 5 ,  y : - 5 ,  scale :  1 ,  duration :  1000 ,  easing :  'easeLinear' }) 
    . add ( bigMovements , { x :  0 ,  y : - 5 ,  scale :  1 ,  duration :  1000 ,  easing :  'easeLinear' }) 
    . add ( bigMovements , { x :  0 ,  y :  0 ,  scale :  1 ,  duration :  1000 ,  easing :  'easeInQuad' }) 
    . play () 
    console . log ( 'Mobile Devices: Window Size < 1000' ); 
}

});