Skip on repeat

[friendlygiraffe]

Hi, I want a Timeline to skip to half way through on repeat

 

So the first play through starts from 0, but on every play through after that, I want it to start form halfway

 

Is that possible? 

var tl = new TimelineMax({repeat:-1, repeatDelay:2});

tl.to("#circle", 4, {x:400})
.seek(2)

 

See the Pen MmRmmJ by friendlygiraffe (@friendlygiraffe) on CodePen.

[Jonathan]

Hello @friendlygiraffe

 

You can use the onRepeat special parameter inside your TimelineMax() constructor since your using repeat.

 

See the Pen wdZeNp by jonathan (@jonathan) on CodePen.

 

TweenLite.defaultEase = Power0.easeNone;

var tl = new TimelineMax({
  repeat:-1,
  repeatDelay:2,
  onRepeat: seek2
});

tl.to("#circle", 4, {x:400});

function seek2(){
  tl.seek(2);
}

 

Happy Tweening

 

Resources:

TimelineMax docs: https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

 

[friendlygiraffe]

Thanks Jonathan, that's really handy 

 

I am actually using it within a nested Sequence, and I noticed the onRepeat method doesn't behave correctly when nested 

 

TweenLite.defaultEase = Power0.easeNone;

var textAnims = new TimelineMax({
  repeat:-1, 
  onRepeat: seek2
});

textAnims.to(".red", 0.5, {x:400,  autoAlpha:0.3})
.to(".red", 0.5, {x:0,  autoAlpha:1})
.to(".green", 0.5, {x:400,  autoAlpha:0.3})
.to(".green", 0.5, {x:0,  autoAlpha:1})
.to(".blue", 0.5, {x:400,  autoAlpha:0.3})
.to(".blue", 0.5, {x:0,  autoAlpha:1})

function seek2(){
  textAnims.seek(1.5);
}

var tl = new TimelineMax();
tl.add(textAnims, 0.0)

 

See the Pen aWxyOO by friendlygiraffe (@friendlygiraffe) on CodePen.

 

[mikel]

Hello @friendlygiraffe,

 

I´m not sure, but this is another possibility: 

 

See the Pen NjmgmM by mikeK (@mikeK) on CodePen.

 

 

Happy tweening ...

[Carl]

Thanks for the demo, very helpful.

 

I think smoothChildTiming:true will help.

See the Pen VbNMwd?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Docs for smoothChildTiming: https://greensock.com/docs/#/HTML5/GSAP/TimelineLite/smoothChildTiming/

 

[OSUblake]

@Carl

 

I have always wondered what that was for. Please add that example to the docs.

[Jonathan]

Correct me if im wrong Carl, i could have sworn that you did a video tut on smoothChildTiming, or am i just losing my memory in my old age?

 

Or am i just thinking of the lagSmoothing video tut?

 

[Carl]

smoothChildTiming is a tough concept to describe with words. I don't think I ever did a video.

 

Blake, thanks for the suggestion but I'm not sure that demo on its own in its current state will illustrate the issue as it clear as it should. Probably needs to be thought out a bit more with an easy way to compare smoothChildTiming:true to false. I've had some ideas for a video but it would require some visuals that would take a while to create properly. For instance, creating a visual representation of "the tween would flip in place, keeping its startTime consistent. Therefore the playhead of the timeline would now be at the tween's 25% completion point instead of 75%." is a bit of a challenge.