Skip on repeat

[friendlygiraffe 11 Likes (Newbie)]

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 5,176 Likes (Superhero)]

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 11 Likes (Newbie)]

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 1,823 Likes (Superhero)]

Hello @friendlygiraffe,

 

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

 

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

 

 

Happy tweening ...

[Carl 9,066 Likes (Superhero)]

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 9,990 Likes (Superhero)]

@Carl

 

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

[Jonathan 5,176 Likes (Superhero)]

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 9,066 Likes (Superhero)]

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.