Anatol

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.

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

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.

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 )

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.

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