Zokdok

In this case I was trying to reproduce how it works with the Virtual Dom framework, normally I wouldn't wrap things in rAFs . Thanks for the explanation! I'll wait for the next release, I'm in no rush and will pick it up in my next update dependencies cycle.

And a variant with v2, which does not show the glitch: https://codepen.io/jvanoostveen/pen/dyPdGeX

I managed to reproduce it in a codepen: https://codepen.io/jvanoostveen/pen/NWPyxXY

The version I've been using is 3.0.4. The setup is somewhat more complex, so I'm sorry for being vague, I'm trying to be clear . The application is working with a virtual dom, rendering is done based on the rAF. I tried to reduce the noise from the following code. So now outside the visible scope, the var projector handles our virtual dom render cycle. When the element is added, this code will be called. It will queue 2 functions, one for measuring the element, one for the animation. The measure is called first, then the animation start. export let slidePanelInFromLeft = (element: HTMLElement): void => { assert(!!element, 'The animation requires an element to animate.'); let panelWidth: number; projector.queueAnimationMeasure(() => { panelWidth = element.clientWidth; }); projector.queueAnimationStart(() => { gsap.fromTo( element, 0.3, { marginLeft: -panelWidth }, { marginLeft: 0, ease: Power3.easeInOut, clearProps: 'marginLeft', onComplete: projector.scheduleMeasure } ); }); }; What I see now is that somehow, 1 render is happening between the placement of the element and the actual start of the animation. If I would be implementing gsap v3 for the first time, I would blame our own vDom rendering, but with v2, this additional frame did not render. Based on some added console.logs, there is no render from the virtual dom happening, all values of panelWidth are correct. Even with a MutationObserver added, I can see it should work all according to plan & code. So I'm confused why with v2 there is no glitch, and with v3, there is... So that's why I was wondering if changes in the behaviour are made or is this simple a conflicting combination. Meanwhile I'll be trying to pinpoint why this is happening ??.

In the setup we have, I've noticed a difference in the fromTo behaviour. Or I might require additional setup now that I missed. In the following situation, the element has a margin left of 0. In the from vars, this value is changed. gsap.fromTo( element, 0.3, { marginLeft: -100 }, { marginLeft: 0, ease: Power3.easeInOut, clearProps: 'marginLeft' } ); With v2, the marginLeft would be applied immediately, but with v3, I see the element being rendered with marginLeft 0, and the next frame, the from vars are applied and it is moved off screen and then animated in. A form of "Flash of Unstyled Content". A fix for me is to do the margin left myself before the animation is started, like element.style.marginLeft = '-100px'; And instead of .fromTo doing a .to animation. But I mainly want to make sure this is/will be the new behaviour or maybe it is a bug! Thanks in advance!

In this case, the code to check if animations are running is not something being called during normal use, so the performance cost is acceptable. We're moving away from this construct anyway. When I look at the documentation for the `globalTimeline`, it mentions it is of type Timeline, and when I look up the `isActive()` in Timeline, it is stated the `isActive()` would return `true` only when there is a running animation. Maybe it is worth mentioning in the `globalTimeline` docs, that it differs from the Timeline behaviour?

The use case is to allow tests to check if the application is in an idle state, i.e. no animations are moving panels in/out etc, before continuing and trying to click things that are animating or in things that are animating. I must say the use case is somewhat obsolete now, as I now do a timescale of MAX_SAFE_INTEGER on the globalTimeline when I detect the CI environment (actually, when prefers reduced motion: reduce is detected). But the code I currently have, is still hit by some of the older/yet to be translated tests so it would be nice to at least make it work.

I was wondering what is the best solution to check if there are any animations running on the page with GSAP v3. With the globalTimeline now available, would it suffice to check with gsap.globalTimeline.isActive(). The previous solution did loop through all the children of the timeline checking is any of them isActive...

Thanks! That's great news! I'm migrating at this moment :).

Thanks! That last unofficial would do the trick when we don't want to 'disable' the animations (I would hate to miss bugs due to animations, if possible).

That might work, at least for near instantaneous animations. Does this only apply to TweenMax or is this also available on TweenLite?

I understand the isActive(), but the issue is, I don't have access to any timeline of tween. I've tried if TweenLite fills the window._gsQueue with running animations, but no luck there. I want to check if there are any ongoing animations from outside the code. For example, in our current driver, this code can be found: public void WaitForAnimationsToComplete() { //Wait for all velocity animations to complete _webDriver.WaitUntil(() => !_webDriver.FindElements(By.CssSelector(".velocity-animating")).Any()); } I'm trying to see if there is a GSAP equivalent .

Thanks, but this is on a single tween, not overall/globally. From the testing point of view, I don't want the tests to know anything about specific animations, I just want to check if (for example when the element in question can't be found) an animation is currently animating and the testing framework simply has to wait for the animation to complete (thus: any animation, not a specific animation) before checking for the element again. PS. I know see this has been counted as my first post since 2009 when I joined the forums . Guess my history is gone from the forums ?.

We are in the process of migrating from Velocity to GSAP. And one of those things different is that Velocity adds a classname when it is handling an animation (`.velocity-animating`). We use this in our Selenium tests so it can wait for the animations to be done before trying to select certain elements on the page. I was wondering how this can be achieved with GSAP (globally)? I really don't want to add classnames to every animation definition, but I would more see it as a setting for the TweenLite calls. I've been Googling and searching the forums/docs, but I can't find any reference to this. Another solution would be to sort of disable TweenLite/TweenMax so animations are done instantaneous, this would not require to have us check for a classname or wait for animations to complete. Bad side of this would be testing without animations and thus not real world scenarios. Thanks in advance, Joeri van Oostveen