Jump to content
Search Community

How to add extra time to end of timeline

macfire test
Moderator Tag

Go to solution Solved by GreenSock,

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 have a master timeline that combines a series of child timelines.

(A navbar contains references to the labels of each child timeline so the user can jump to any section of the master.)

 

I looking for a way to add extra time at the end of child timeline before moving to the next.

I've tried, for example, using tl.add("+=4") to the end of a child timeline. But this does not add any time to the end of the child timeline. The next child timeline will play immediately after any tween in the previous child timeline.

 

var master = new TimelineMax();

master.add(child_red())
      .add(child_blue())
      .add(child_green())
;

function child_red() {
  master.add("child_red");
  
  var tl = new TimelineMax();
  tl.to("#redBox", 1, {x:550})
  .to("#redBox",1,{rotation:360})
  
  /* 
  	   Want to extend timeline by n-seconds.
           No visible animation -- just allowing user time to read some text.
   */
  
  //.add("+=4");  // <-- doesn't work as expected when at end of child timeline
  
  //.addPause("+=4"); // <-- interferes with master.goToAndPlay function. Does the pause have to be removed?
  return tl;
} 

...

See the Pen PwRNJj by macfire (@macfire) on CodePen

Link to comment
Share on other sites

  • Solution

First, I'd highly recommend checking out this page/video: http://greensock.com/position-parameter

 

You generally shouldn't need to "add extra space" at the end of a timeline. If your goal is to create a gap between the last tween and the next one that you're about to add, you simply use the position parameter to tell it where to put that tween ("+=4" for a 4 second gap). 

 

If you really need extra space (and again, this is pretty unusual), you can do so by adding a callback at a certain spot, and it can be an empty callback like:

tl.add(function(){}, "+=4"); //this typically isn't necessary

Does that help?

  • Like 2
Link to comment
Share on other sites

Jack, thank you. 

 

While you may consider it unusual, it's the solution I needed.

 

The use case is a slideshow, where each slide is a child timeline -- containing both animation and text.

I need to allow extra time at the end of each slide for the user to finish reading any text shown, before proceed to next slide.

 

I've updated the codepen example with this solution.

 

Thanks.

 

P.S. I checked out the page/video on the position parameter before posting, but I didn't find the example you provided. Maybe I overlooked.

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...