Jump to content
Search Community

Skip on repeat

friendlygiraffe test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
×
×
  • Create New...