Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
friendlygiraffe

Skip on repeat

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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/

 

  • Like 4
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Hello @friendlygiraffe,

 

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

 

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

 

 

Happy tweening ...

Link to comment
Share on other sites

@Carl

 

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

  • Like 2
Link to comment
Share on other sites

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?

 

:)

  • Like 3
Link to comment
Share on other sites

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.

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.
×