onTick(); is doing this allowed?

//So, my rambling begins

I need to know how long it takes before something happens in the animation pipeline.

This listens to screen size dimensions changing.

//Code but do note that you do need to start it in onReady() and add an element named and hide it.

import wixWindow from ‘wix-window’ ;

let windowHeight = 0 ;
let windowWidth = 0 ;

let windowHeightOld = 0 ;
let windowWidthOld = 0 ;

let delay = 50 ;

let active = true ;

let ticker = wixAnimations . timeline ({
“repeat” : 0 ,
“repeatDelay” : 0 ,
“yoyo” : false
});

function preCalculate ( callback ) {

wixWindow . getBoundingRect () 

    . then (( windowSizeInfo ) => { 

        windowHeight  =  windowSizeInfo . window . height ; 
        windowWidth  =  windowSizeInfo . window . width ; 
        callback (); 
    }); 

}

function onTick ( ){
if ( active === true ){
preCalculate (()=>{

if (( windowWidthOld != windowWidth )||( windowHeightOld != windowHeight )){
//Do something
}
windowWidthOld = windowWidth ;
windowHeightOld = windowHeight ;
});
ticker . add ( $w ( ‘#dummy’ ), { x : “+=1” , easing : ‘easeLinear’ , duration : delay }). play (). onComplete (()=>{
onTick ();
});
}
}

//To enlighten you

I ask because I run into a couple problems and such because my html5 iframe that did this no longer works because of silly changes the browser makers keep making.

Problem is how long it takes before something animates varies per operating system and therefore, timers are not that useful.

So, I want to use something like this but before I start coding away and it is not allowed, I need to know.

Thus me asking.

//Postscript

Do note that I am making my websites mostly for Windows Edge this because I can’t keep up with all the changes they keep making and I am trying to find the limits.

Also, know that I am doing this more as a hobby.

You do need hardware acceleration to view them properly.

So, on Apple devices they and perhaps this piece of code won’t work properly.

I am still investigating how to force hardware acceleration on Apple devices.

Perhaps I can cheat and add something like this:

transform: translateZ(0);

Anyways, pretty cool tool this is I like that it adapts to screen size changes and that you can make things move, I really like.

Also, if you have a sound html5 iFrame I suggest you hide it over a welcome button/screen this because when using Chrome, you need a user interaction before you are allowed to play sound.

O_______O

//Question

I know these are more Velo questions. However, I got to this page when I searched for EditorX Velo forum.

import wixAnimations from ‘wix-animations’ ;

let animation = wixAnimations . timeline (
{
“repeat” : 0 ,
“repeatDelay” : 0 ,
“yoyo” : false
});

function doItDammit ( ){
for ( let i = 0 ; i < 10 ; i ++){
animation . add ( $w ( ‘#movingThingy’ ), { x : i * 100 , duration : 100 }, 100 )
if ( i === 10 ){
animation . play ();
}
}
}

When I update animations at run time there can be a delay.

So, I would like to create them before they play using variables, I get; like screen width and such but, in the background, then when done play them.

However, when I do this, I believe only the first or last one is added.

It doesn’t really make sense that this does not work.

Rather annoying but, is this me or is this them?

hey there
this is Editor X dedicated forum, in case you have code related question there are more chances that you will receive more replies on Wix Velo forum or on Facebook Community group:
https://support.wix.com/en/article/content-manager-displaying-your-store-product-categories-using-dynamic-pages
https://www.facebook.com/groups/editorxcm/

Thank you so much!

I will continue my rambling there.

So, this is more for things purely related to the EditorX editor part.

To me it feels like they should add a height adjuster in the editor window because now I have to preview every time to see how my website reacts in height changes.

there is no separate forum for Velo Editor X, JFYI here is the link for Velo forum: https://community.wix.com/velo/forum