Jump to content
Anatol

tweenFromTo resumes on window refocus

Recommended Posts

Hi! I used tweenFromTo() for the first time and it works fine, playing from defined start to end time. However, when I refocus on the browser window/tab the timeline playback resumes. Is there any way to stop it from doing this?

 

I don't think the below code is important here, but I'll include it anyway.

 

const tl = new TimelineMax()
tl.set( juice.sprite.position, { x: 380, y: 720} )
tl.set( juice.sprite.scale, { x: .25, y: .25, ease: gsap.Power4.easeOut } )
tl.to( juice.sprite.scale, duration / 2, { x: 1, y: 1 }, 0 )
tl.to( juice.sprite.position, duration, { x: 415, y: 650}, duration / 4 )

tl.tweenFromTo( 0, duration / 2 )

 

Share this post


Link to post
Share on other sites

Hi Anatol and welcome.

 

Can you please link to a minimal CodePen example of your issue so we can see exatcly what you mean? This post can help guide you in creating one. 

Share this post


Link to post
Share on other sites

Thanks for the reply. Actually now I think this issue is not gsap/TimelineMax related. I use it in Phaser 2 which has a line of code in the TweenManager:

this.game.onResume.add(this._resumeAll, this);

So my guess is that it simply resumes all timelines when the game window is refocused on.

  • Like 1

Share this post


Link to post
Share on other sites

Again, this is in combination with Phaser 2 which seems to auto-resume all paused timelines on refocusing the tab/window. It may be a bit convoluted, but I can kill the timeline when the playhead reaches the tweenFromTo "to" time. If I still need to resume the timeline later I need to redo it and tweenFromTo it from the previous end position, but at least it's a workaround.

tl.tweenFromTo( 0, duration / 2, { onComplete: tl.kill, onCompleteScope: tl } )

 

Share this post


Link to post
Share on other sites

The complete workaround goes something like this:

const tl = makeTimeline( { duration } )
// play the timeline from start to a certain time
tl.tweenTo( duration / 2, { onComplete: tl.kill, onCompleteScope: tl } )

Later in the code:

const tl = makeTimeline( { duration } )
// now play the timeline from the previous end position
tl.play( duration / 2 )

Technically 2 timelines, but the effect is what I need in my case. I never needed any of this before, but in this particular case it's important to avoid Phaser's auto-resume.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.