Jump to content
GreenSock

remi

Stopping one timeline from another

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

So I'm just starting out with GSAP and love it so far. But I'm sort of stuck on this issue. I have 2 timelines controlling separate parts of an animation. One timeline controls the sprite and the other the movement of the element.

 

Here is a very rough example of what I'm trying to do: (sidenote: the real version has a man on top of the bicycle in isometric perspective, so I have to use a sprite)

See the Pen faJlE by remischouten (@remischouten) on CodePen

 

Maybe I'm doing it all wrong, but hoping someone can at least point me in the right direction.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Glad to hear you love GSAP so far. 

Thanks a ton for creating the codepen demo, its very helpful.

 

I wasn't sure exactly how or when you wanted to stop a timeline or which timeline you wanted to stop. assuming you wanted the wheels to stop spinning when the bike stops moving, you could do this:

 

var cycling2 = new TimelineMax({repeat:-1, repeatDelay:0});
cycling2.to(['.sprite'], 1, {x:50, ease:Sine.easeIn})
  .call(cycling.pause, [], cycling)// function, params, scope
  .to(['.sprite'], 0.5, {x:60,y:-5,rotation:20,ease:Sine.easeOut})
  .to(['.sprite'], 0.5, {x:59,y:0,rotation:0,ease:Sine.easeIn})
  .call(cycling.play, [], cycling, "+=1")// function, params, scope
  .to(['.sprite'], 2, {x:150,ease:Sine.easeIn});

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

 

notice the call() method allows you to define a function that you can call, in this case the play() and pause() methods of the cyclcing timeline.

 

You will also notice that instead of using add() I used the to() and set() methods of TimelineLite/Max. This reduces the code quite a bit.

 

Also it appeared that you were adding dummy (empty) tweens to the timeline to allow for delays. This is not necessary as the position parameter of add(), set(), to() and other methods of TimelineLite/Max allows you to precisely set the start time of any tween in a timeline using either absolute or relative positioning.

 

Definitely read about the to() method for a detailed description of the position parameter

 

Also, please watch this video to see exactly how the position paramater works: http://www.greensock.com/sequence-video/

 

Let us know if you need further help.

  • Like 3
Link to comment
Share on other sites

Love putting a call right in there like that.  I extended Carl's example with a tweening of the cycling timescale so the wheels slow down and then speed back up again with the bike.

 

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

 

I'm a huge fan of GSAP.  I just hope there is a solution to the transform problem so I can use it in my project.

  • Like 2
Link to comment
Share on other sites

Nice solution Gary!!

 

Although there's no need to wrap a TweenLite instance in a call method, you can just use a to() instance, like this:

cycling2
  .to(['.sprite'], 1, {x:100, ease:Sine.easeIn})
  .to(cycling, 1, {timeScale: 0.1, ease:Sine.easeOut})
  .to(['.sprite'], 0.5, {x:150,y:-5,rotation:20,ease:Sine.easeOut})
  .to(['.sprite'], 0.5, {x:155,y:0,rotation:0,ease:Sine.easeIn})
  .to(cycling, 3, {timeScale: 1, ease:Sine.easeIn})
  .to(['.sprite'], 3, {x:400,ease:Power1.easeIn});

The great thing about GSAP is that lets you tween any numeric value of any object. In this case the timeScale value of the cycling instance. Pretty neat, right?  8-)

  • Like 2
Link to comment
Share on other sites

Yep, pretty neat.

Link to comment
Share on other sites

Wow thanks for all the feedback, going to dig into this and let you guys know how it works out.

 

[edit]

 

Ok got it all figured out now and it works. This really gave me the little push in the back to really understand the basics of GSAP and shows the potential it has!

 

Keep up the good work

 

[/edit]

Edited by remi
Link to comment
Share on other sites

  • 2 weeks later...

Ok next question, tried to find the answer to this but couldn't find it. But I'm looking for a way to clean up this bit of code:
 

var bScene1 = new TimelineMax()
bScene1
.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=2')
.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=0.05')
.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=0.05')
.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=0.05')
.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=0.05')
.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=0.05')
.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=0.05')
.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=0.05')
.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=0.05')
...
 
and this goes on for another 80 something times. Surely there is a more effecient way to write this.
Link to comment
Share on other sites

I recommend SteppedEase too for it's simplicity, but loops are also pretty good at running repeated lines of code...

bScene1.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=2');
for (var i = 0; i < 80; i++) {
  bScene1.set('#flex-head', {backgroundPositionY:'-=210px'}, '+=0.05');
}
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.
×