//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 <dummy> 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.
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/
//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?
//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