Jump to content
Search Community

tweenFromTo resumes on window refocus

Anatol test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 )

 

Link to comment
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
Link to comment
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 } )

 

Link to comment
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
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...