Jump to content
Search Community

Pausing nest timelines

kilmc 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

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);
  • Like 4
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...