Jump to content
GreenSock

Mr Pablo

Stopping (and resetting) a timeline after a fixed time?

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

My animation is made up of various nested timelines and I need to be able to make sure the 2nd level timelines (the master timeline adds the 2nd levels ones to queue them up basically) last only a certain length of time (lets say 20 seconds).

 

I am using the following code to "pad" out my timeline:

.set({}, {}, 20);

Now, if the tweens inside the animation last fewer then 20 seconds, it seems to work fine, with the animation last 20 seconds and repeating.

 

BUT, if the animation lasts longer then 20 seconds (for example, mis-typed tween durations etc) the animation will last till the tween times (i say tween, i am only using timelinemax) finish.

 

How can I force the second level timelinemax to stop and reset after the 20 seconds?

 

(on a similar note, is there a way to change how the delay times work, I remember reading somewhere that they can be made to all start from 0, or follow on from the last tween? (my current delays are following on form the last tween, and my animation data is old, hence these issues with the fixed timeline length))

Link to comment
Share on other sites

Hello Pablo,

 

Is it possible to set up a limited codepen or jsfiddle to better see your code in context with JS, CSS, HTML.. thx 

Link to comment
Share on other sites

See the Pen xvfkK by mr_pablo (@mr_pablo) on CodePen

 

If you see here, the animation should only last 10 seconds, but the 15 seconds tween is causing it to over run.

 

If you change the 15 to say, 9, then the animation does only last 10 seconds.

 

EDIT - whilst this demonstrates my issue. my actual code is a bit more in-depth, with 3 timelines in use , but the solution should be the same I assume)

Link to comment
Share on other sites

im sorry.. but im still a little confused on what you mean by "pad" out your timeline ?

timeline.set({}, {}, 10);

:)

Link to comment
Share on other sites

After all the timelines are added to the main timeline, add a callback to the main timeline at a time of 20 that handles pausing the timeline. Not really sure what you mean by resetting the child timelines though.

timeline.add(someTimeline)
timeline.add(someOtherTimeline)

timeline.addPause(20, someFunction);

function someFunction() {
 //do additional stuff if necessary
}
  • Like 1
Link to comment
Share on other sites

Hi Paul,

 

Just like Jonathan and Carl I'm not completely sure of what's the desired effect you're after.

 

Carl's suggestion seems to be the ideal thing, because that pauses the timeline at 20 seconds independently of it's total duration and in the callback you can add a timeline.seek(0) to set the timeline's playhead at zero seconds.

 

Also a suggestion would be to take the code to add the timeline to the array outside the loop because every time the  loop runs, you're adding the timeline, so if you have 4 elements, the timeline will be added 4 times to the array and any callback you place inside it will be triggered 4 times and that could cause some odd behaviour later on your code. You could add the timeline to the array after the loop.

$.each(assets, function(a, {
				var timeline = new TimelineMax();
				if(a == 0) {
					TweenMax.set($("#drifter"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 0, y: 100 });
					timeline.add(TweenMax.to($("#drifter"), 2, { y: 0 }));
				} else {
					TweenMax.set($("#cape"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 200, y: 100 });
					timeline.add(TweenMax.to($("#cape"), 5, { y: 0 }));
				}
        timeline.addPause(2.5, function(){timeline.seek(0)} );
			});
timelineArr.push(timeline);

Rodrigo.

  • Like 2
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.
×