Jump to content
Search Community

Remove Timeline Delay

pnda007 test
Moderator Tag

Go to solution Solved by Carl,

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

Hello, 

 

I've been fighting with this for way too long now (I've probably read 14000 forum posts and know the documentation by heart) and I thought it was about time I asked for some advice.

 

See the Pen rVLEbE by anon (@anon) on CodePen

 

After you've finished basking in the gloriousness of this fabulous unicorn (and recovered from viewing my lazy code), perhaps you could help me out.

 

Essentially, all I want to do is remove the delays from the respective timelines. The actual code I'm working with is much complex than this (obviously) and involves animating a bunch of SVG elements, hence the nested timelines. 

 

When the animation plays for the first time, I'd like there to be a delay at the beginning and then a delay before the second timeline begins, simple. However, using the clever GSAP magic I want users to be able to click on an element to take them to a certain "state", this will be animated using tweenTo(). The issue is if a user goes from one end of the animation to the other they have to sit through the delays as well. I'd like to remove these delays. The animation only needs to play with delays once (when the page first loads), so it could be removed at the end of each timeline (or both delays removed at the end of the master timeline).

 

I've tried calling .delay() directly in the timeline, it works but it removes the delay before it has played, which is no good. I've tried .delay() in a function, I've tried this function via onComplete and via .call(). No joy (I read something about .delay only working once or something along those lines but I was in a state of delirium so I can't be certain). I've also tried doing weird stuff with labels then removing them later but removing them broke everything (and made my cry a bit). I tried some other things that I can't quite remember as well, but they didn't work either.

 

Then I basically lost my mind and made a unicorn themed Codepen example to illustrate my plight.

 

Please help, it would be most appreciated.

 

 

Peter.

See the Pen vOXJjp?editors=001 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

First, my apologies for not getting to this sooner. 

 

Second, thanks so much for the demo! I appreciate the unicorns and really appreciate the simplicity of it. I wish everyone did things like this.

 

Its clear that you have read the docs and are already employing some really cool techniques like nested timelines and tweenTo(). Nice job.

I think you are going to like the solution.

 

Instead of adding delays and changing or removing them. Build an additional timeline that uses tweenTo() to literally scrub through your tlMaster at any interval or rate that you like.

 

//keep these animations pure with no delays
var tl = new TimelineMax();
tl.to(".unicorn", 1, {x:185, ease: Power0.easeNone});


var tl2 = new TimelineMax();
tl2.to(".unicorn", 1, {x:365, ease: Power0.easeNone});


var tlMaster = new TimelineMax({paused:true});


//no delays in here either
tlMaster.add(tl)
  .add("pony")
  .add(tl2, "pony")
  .add("finish");


//automate the playback of tlMaster with delays using tweenTo and postiion param
var firstRun = new TimelineLite();
firstRun.add(tlMaster.tweenTo("pony"), "+=1")
        .add(tlMaster.tweenTo("finish"), "+=2")


// tweenTo relevant point on timeline when clicked
$("li:nth-child(1)").on('click', function() {
  $("li").removeClass("clicky");
  $(this).addClass("clicky");
  firstRun.kill(); //important if someone clicks button before firstRun is done playing
  tlMaster.tweenTo("start");
});


...

 

demo: http://codepen.io/GreenSock/pen/vOXJjp?editors=001

 

please note that each button when clicked will call

firstRun.kill(); //kills the timeline that has tweens that are tweening the time() of tlMaster

Let us know if you need any more help.

  • Like 1
Link to comment
Share on other sites

No need to apologise for any delay, your response was faster than I expected! Nice to see the creators are active in helping to solve problems, very refreshing!

 

This does indeed solve my problem wonderfully (and I think I even understand what is happening which, I can assure you, doesn't happen often), thank you so much for the help! I've had lots of fun playing with GSAP and all of its plugins, this kind of support just make me love it more. 

 

Thanks for a great product and thanks for all the help.

 

Keep up the good work! I'll mark this one as solved, thanks again.

  • Like 1
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...