Pausing nest timelines

[kilmc 0 Likes (Newbie)]

I'm having a bit of trouble getting a set of chained timelines to pause as they complete.

I want to have timelines to control a couple of objects on screen and then pause until the user hits the forward button to advance but I can't seem to get the pause to kick in. It just keeps running through both timelines.

 

I'm guessing I'm using the wrong approach. Would love some help on this.

$('.trigger-forward').click(function() {
  scene.play();
});

$('.trigger-backward').click(function() {
  scene.reverse();
});


var moment_1 = new TimelineMax({pause:true});
var moment_2 = new TimelineMax({pause:true});

moment_1.to("#scene_earth_move .earth", 2, {scale: 1.4}, 0)
.to("#scene_earth_move h1", 1, {top: "40%"}, 0);

moment_1.to("#scene_earth_move .earth", 2, {scale: 2}, 0)
.to("#scene_earth_move h1", 1, {top: "80%"}, 0);

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

scene.add(moment_1)
.addPause()
.add(moment_2);
 

Thank you

[Diaco 1,948 Likes (Superhero)]

Hi kilmc 

 

pls fix this in all of your timelines : paused:true is correct not pause:true

 

and pls make a reduced CodePen demo for better response :

 

Read This First: How to Create a CodePen Demo

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

Like Diaco said, a CodePen demo will really help as right now I don't see any tweens in the moment_2 timeline and I think little things like that will be very easy for us to fix, edit and give back to you once we have some code that we can test and share.

 

I'm sure we will be able to give you the help you need.

[kilmc 0 Likes (Newbie)]

Thanks for the response. Here's the codepen.

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

 

Before changing "pause" to the correct "paused" clicking the forward arrow did play the timeline but now it's not playing at all. I'm sure this is expected behaviour but I wanted to note it.

[Diaco 1,948 Likes (Superhero)]

Hi kilmc 

 

- since your master Timeline is Pused:true you dont need to pause the childs timeline/tweens .

 

- you can add easily pause point in your Timelines with this : .addPause() 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/addPause/

 

- your both child timeline have same name !!... moment_1 and moment_2 .

 

pls try this :

  $('.trigger-forward').click(function() {
    scene.play();
  });

  $('.trigger-backward').click(function() {
    scene.reverse();
  });

  var moment_1 = new TimelineMax();
  var moment_2 = new TimelineMax();

  moment_1.to("#scene_earth_move .earth", 2, {scale: 1.4}, 0)
  .to("#scene_earth_move h1", 1, {top: "40%"}, 0);

  moment_2.to("#scene_earth_move .earth", 2, {scale: 2}, 0)
  .to("#scene_earth_move h1", 1, {top: "80%"}, 0);

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

  scene.add(moment_1)
  .addPause()
  .add(moment_2);

[kilmc 0 Likes (Newbie)]

That worked a treat. Thank you!