[tweenFromTo resumes on window refocus]

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.

[tweenFromTo resumes on window refocus]

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 } )

 

[tweenFromTo resumes on window refocus]

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.

[tweenFromTo resumes on window refocus]

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 )

 

[slow down animation on repeat]

Hi @OSUblake , thanks for your reply and the CodePen. I wonder why I didn't just try it with a timeScale tween in the first place. Well, I tried to tween _timeScale at some point but the result didn't look right obviously. Thanks also for some other useful suggestions in the code. I didn't know about _gsTransform , that's handy.

[slow down animation on repeat]

Hi,

 

I'm reviving this old thread. I had the same problem, so here's a way to tween the timeScale of a timeline using TweenMax. In this way you can also set the ease for the timeScale increase/decrease or have an onComplete callback if you wish.

 

Here's a

See the Pen OaKqoq?editors=0010 by anatolbogun (@anatolbogun) on CodePen

.

 

function tweenTimeScale( opt ) {
  const { timeline, duration, from, to, onComplete, onCompleteParams, onCompleteScope } = opt
  let { ease } = opt
  if ( !ease ) { ease = Linear.easeNone }

  const timeScale = { value: from }
  TweenMax.to( timeScale, duration, { value: to, ease, onComplete, onCompleteParams, onCompleteScope } )

  var updateTimeScale = function() {
    // console.log( 'timeScale:', timeScale.value )
    timeline.timeScale( timeScale.value )

    if ( timeScale.value !== to ) {
      window.requestAnimationFrame( updateTimeScale )
    }
  }

  window.requestAnimationFrame( updateTimeScale )
}

 

Usage is quite straightforward:

const tl = TimelineMax()
tl.to( obj, 1, { rotation: 360, repeat: -1 } )
// etc.

// e.g. slow the timeline to a halt over 3 seconds and pause it at the end
tweenTimeScale( {
  timeline: tl,
  duration: 3,
  from: 1,
  to: 0,
  ease: Power2.easeOut, // optional
  onComplete: tl.pause, // optional
  onCompleteScope: tl, // optional
} )