Jump to content
Search Community

Tween doesn't start from the start when using it inside pixijs onComplete function

kisha test
Moderator Tag

Recommended Posts

I uploaded the small file because I'm loading image with pixi from local storage and I couldn't adapt code for codepen

So inside doneLoading function I placed my simple tween that is suppose to scaleY to 0 the cover that is covering image, once the image is loaded, it works but the animation render starts from very beggining. (I have also used gsap.set for transfromOrigin)

However if I use CSS for transition and transfrom-origin, and then add this line in doneLoading function it works smoothly from the start

cover.style.transfrom = scaleY(0)

But I want it to work with gsap. Is there something I'm missing?

codepen pixi.7z

Link to comment
Share on other sites

After trying to debug for 2h after posting this, only useful info I could get is that app.stage.addChild is the one that makes the page "freeze" for couple milliseconds and that is what's causing it, even tho assets are preloaded. 

Link to comment
Share on other sites

Hi @kisha. I'm a bit confused - I downloaded your file and it seems to work exactly as expected. I don't really understand what you mean by "doesn't start from the start". When I uncomment your CSS transition-based version, it doesn't work smoothly at all, so I guess I'm just not sure what you'd like us to address. 

 

If you're saying that the browser takes some time to add your DOM element, and you want the animation to start on the next tick, you could just put the tween in a delayedCall() with a tiny amount of delay, or a requestAnimationFrame(). GSAP is honoring the timing that you're requesting as far as I can tell, so this doesn't appear to be an issue with GSAP at all (but maybe I'm misunderstanding what you're saying). 

  • Like 1
Link to comment
Share on other sites

On 2/8/2021 at 7:29 AM, GreenSock said:

Hi @kisha. I'm a bit confused - I downloaded your file and it seems to work exactly as expected. I don't really understand what you mean by "doesn't start from the start". When I uncomment your CSS transition-based version, it doesn't work smoothly at all, so I guess I'm just not sure what you'd like us to address. 

 

If you're saying that the browser takes some time to add your DOM element, and you want the animation to start on the next tick, you could just put the tween in a delayedCall() with a tiny amount of delay, or a requestAnimationFrame(). GSAP is honoring the timing that you're requesting as far as I can tell, so this doesn't appear to be an issue with GSAP at all (but maybe I'm misunderstanding what you're saying). 

Hi @GreenSock Thank you for answer and sorry for late replay.

You are not misunderstanding, that's exactly what I mean. It looks like when I use app.stage.addChild adds couple ms of freeze before adding sprite/image to the stage, and then it looks like gsap tween doesn't start from the very beginning.

I dont know why the css version isn't the smooth for you, did you uncomment both JS and CSS lines? 

Anyway, after running live server, try hard refreshing and you might see better what I mean by tween not starting from the beginning. In more complex example where i have more app.stage.addChild with diffferent spirits, which load on click, the "lag" is event more apparent and tween is past 50% of animation before Im even able to see the start of tween animation. 
 

Link to comment
Share on other sites

6 hours ago, kisha said:

I dont know why the css version isn't the smooth for you, did you uncomment both JS and CSS lines? 

Yes, I uncommented both. Didn't work at all. 

 

6 hours ago, kisha said:

In more complex example where i have more app.stage.addChild with diffferent spirits, which load on click, the "lag" is event more apparent and tween is past 50% of animation before Im even able to see the start of tween animation. 

I didn't see any of the things you described, and this sounds totally unrelated to GSAP - if you create/start a tween and then on that very same tick your other code ends up taking a very long time to execute and the browser can't render for an extended period of time, GSAP still honors the start time as being on that tick. So, for example, if you do a gsap.to(...) with a duration of 0.8 second and on that very same tick you have other JS code that takes 0.4 seconds to execute, then the tween will jump to 0.4 seconds on that next render. That's a GOOD thing, but if you'd like for it to push the global time forward to adjust for lag you can use the gsap.ticker.lagSmoothing() feature to set it to whatever you want. By default, it waits up to 0.5 seconds before apply lagSmoothing. 

 

See https://greensock.com/docs/v3/GSAP/gsap.ticker#lagSmoothing

 

I hope that helps. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...