Dealing with infinite child timelines (start, stop)

[MLM 1 Likes (Newbie)]

What is the best way to handle child timelines that have a infinite duration?

 

You can't just `TimelineMax.add` an infinite child timeline because they would block and cause the remaining events to never run in the root timeline.

 

The best way I have found is `restart`'ing the infinite child timeline in an `onStart` or `onComplete` event.  One problem I have run into with this method is, if you seek past when the child timeline gets initiated, then it will never run.

 

When using `start`, `stop`, `seek` on the root/parent timeline, how do you `start`, `stop` the child timeline appropriately?

 

 

 

Here is a basic example of an infinitely spinning ball that also translates around on the root timeline: 

let tl = new TimelineMax();

let ballNode = $('.ball');

// Set up the infinite rotating timeline
let alwaysRotateTl = new TimelineMax({
	repeat: -1,
	paused: true
});

alwaysRotateTl
	.fromTo(
		ballNode,
		2,
		{ rotation: 0 },
		{ rotation: 360, ease: Linear.easeNone }
	);


// Now do some stuff on the main timeline
tl
	.addLabel('red-label')
	.set(
		ballNode,
		{ backgroundColor: '#ff0000' },
		0
	)
	.to(
		ballNode,
		2,
		{
			x: 100,
			backgroundColor: '#00ff00',
			onComplete: function() {
				// Start the infinite rotate loop
				alwaysRotateTl.restart();
			}
		},
		'green-label'
	)
	.to(
		ballNode,
		2,
		{ y: 100, backgroundColor: '#00ffff' },
		'cyan-label'
	);

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

[OSUblake 9,990 Likes (Superhero)]

Why don't you just call the child methods as well?

 

See the Pen eNyOvR by osublake (@osublake) on CodePen

[MLM 1 Likes (Newbie)]

@OSUBlake Thank you for the reply. Clever, but does have a flaw where you can pause at the beginning or any stage before it starts rotating, and then you press play which makes it prematurely start rotating.

 

Also, because `start`, `pause`, `seek` can be called anywhere, I would need to wrap each one with the proper child timeline play/pause and only use the wrapped version throughout. But this also falls apart with `addPause`. I don't use `addPause` but I am looking for something robust and doesn't require maintenance so that I don't have to remember to add it in some list or in the wrapped call in order to properly pause it.

[OSUblake 9,990 Likes (Superhero)]

I changed the pause rotating issue with a label check, but maybe somebody has else a better way to do this.

 

When I work with objects that might not have any concept of each other, I like to use events to control them. Here's a demo I made that uses custom events. I found it too hard to directly control the growth of each leaf, so I just send out an event and let the leaves figure out if it is time to grow.

 

See the Pen gpGEye by osublake (@osublake) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi MLM 

 

if i understood correctly , pls try this : 

 

tl.add(function(){ alwaysRotateTl.pause(0) })
  .set(ballNode,{backgroundColor:'#ff0000'})
  .to(ballNode,2,{x: 100,backgroundColor:'#00ff00'},'red-label')
  .add(function(){ alwaysRotateTl.play() })
  .to(ballNode,2,{y:100,backgroundColor:'#00ffff'},'cyan-label')
  .to(ballNode,2,{x:0,backgroundColor:'#ffff00'},'yellow-label');

[Carl 9,066 Likes (Superhero)]

hmm, my interpretation is that you just need a way to insert an infinite child so that it doesn't throw off where the "end" of the timeline is when you add other tweens. You also want to have the convenience of

 

- pausing / playing the parent does the same to the infinite child

- if you go to a time in the parent before the infinite-child's start time, the infinite child should not be playing or have any effect (in this case no rotation)

 

The easies approach is just to add() the infinite thing AFTER you build the rest of the timeline

 

tl.add('red-label')
  .set(ballNode, {backgroundColor: '#ff0000'}, 0)
  .to(ballNode, 2, {x: 100, backgroundColor: '#00ff00'}, 'green-label')
  .to(ballNode, 2, {y: 100, backgroundColor: '#00ffff'}, 'cyan-label')
  .to(ballNode, 2, {x: 0, backgroundColor: '#ffff00'}, 'yellow-label')
  .add(alwaysRotateTl, "cyan-label")//plop this in after all other tweens are added

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

 

 

If you absolutely must create and add these things in order, you can also use recent().endTime() to fine the end time of the most recently added tween like

tl.add('red-label')
  .set(ballNode, {backgroundColor: '#ff0000'}, 0)
  .to(ballNode, 2, {x: 100, backgroundColor: '#00ff00'}, 'green-label')
  .add('cyan-label')
  .add(alwaysRotateTl)
  .to(ballNode, 2, {y: 100, backgroundColor: '#00ffff'}, 'cyan-label')
  .add('yellow-label', tl.recent().endTime()) //find end of most recently added tween
  .to(ballNode, 2, {x: 0, backgroundColor: '#ffff00'}, 'yellow-label')
  .to(ballNode, 1, {scale:0.5, backgroundColor:'#f60'}, tl.recent().endTime())//add another tween after the most recently added tween
  .to(ballNode, 1, {scale:2, backgroundColor:'#000'}, tl.recent().endTime() + 2)//add another tween 2 seconds aafter the most recently added tween ends

It's a bit more verbose, but handy.

 

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

 

Docs for .recent()

[MLM 1 Likes (Newbie)]

@Diaco.AW

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

with your solution. The root timeline `pause` doesn't pause the child timeline. I also noticed that if you are at the beginning before it starts rotating, and then seek "yellow-label" it doesn't rotate. Although this works fine with the "cyan-label"(which is also after the `add` rotate function), so I am not sure what side-effect is happening there.

 

 

@Carl Your solution for adding infinite child timelines after everything else is built is awesome! I wish I didn't have to sacrifice potential clarity from that would come from having it in a more logical spot.

 

Perhaps a new keyword for the `TimelineMax.add` `align` option or a completely new option that would ignore the duration "so that it doesn't throw off where the "end" of the timeline".

// New `align` option keyword
// does collide with existing keywords, would need `ignore-sequence`, `ignore-start`
tl.add(childTimeline, '+=0', 'ignore');

// Or new parameter `blocking` or `isBlocking`
tl.add(childTimeline, '+=0', 'normal', 0, false);

// Maybe a new method
tl.addNonBlocking(childTimeline);
tl.addIgnored(childTimeline);

I really appreciate you laying out all of the possible options. Just to address your `tl.recent().endTime()` solution, very cumbersome to always have to reference a specific position from after the infinite child is added. This could also be cleaned up by putting the rest of the timeline in its own timeline if it didn't need to reference any labels in the root.

[Diaco 1,948 Likes (Superhero)]

actually " alwaysRotateTl " isn't mainTimeline's child .

 

Pls check this out : 

See the Pen GJyoQG by MAW (@MAW) on CodePen

[MLM 1 Likes (Newbie)]

@Diaco.AW This is very similar to

See the Pen eNyOvR?editors=001 by osublake (@osublake) on CodePen

which is not very ideal.

[Carl 9,066 Likes (Superhero)]

Hi MLM

 

Thanks for the suggestion, we added recent() specifically for this use case and very carefully discussed changing the API so that you could specify whether or not new tweens, callbacks, labels get added to the end of the timeline or at the end of the last tween. We were going to create an AppendMode property for timelines which you could use to dictate whether new things got added at the end of the timeline or after the most recent thing.

 

It boiled down to the fact that such a change would really clutter and confuse the API. Every method that uses a position parameter would need to be adjusted and we would have to explain how the position paramater's behavior would change based on some other setting in the Timeline. 

 

For instance to explain this tween

TweenLite.to(obj, 1, {x:100}, "+=1");

In the tween above the position parameter is setting the insertion point to be 1 second after the end of the timeline or 1 second after the previous tween ends depending on what the value of appendMode is on the parent timeline.

 

And although we considered doing it on a tween by tween basis by allowing an additional parameter like isBlocking or ignore, that would just bloat the API and then people would be complaining that typing "ignore" on each tween is cumbersome. 

 

If you look at the existing flexibility of the position parameter (relative, absolute, at label, relative to a label) as shown here: http://greensock.com/position-parameter. Its pretty marvelous what it can do already. Adding infinite animations to timelines is not very common and when it needs to happen, there are existing solutions that will work. When considering the impact to the API it just didn't make a lot of sense to add another layer of confusion.

 

if recent().endTime() is too cumbersome for the few times its needed, you could write your own function perhaps

 

 

tl.to(obj, 1, {x:100}, end(tl));

function end(tl) {
  return tl.recent().endTime();
}

You can read the discussion here:

 

http://greensock.com/forums/topic/10617-add-tweenlabel-after-the-last-one-added-not-at-the-end-of-the-timeline/page-2#entry42565

 

Thanks again for the feedback. Hopefully the suggestions presented will be suitable.

[OSUblake 9,990 Likes (Superhero)]

I wonder how I missed this, because I never really knew what .recent() was used for. One little thing, the list of methods in the docs for TimelineMax has recent in the wrong order alphabetically.

 

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

[MLM 1 Likes (Newbie)]

@Carl Thank you for the insight into the decisions!

 

Just to be clear, I like your solution of adding them onto the very end after everything else is built mentioned in Post #6 the best so far.

 

I think infinite timelines are a big use case. Although I am new to GSAP and I am still working on my first animation. I am using it to keep a flame flickering constantly while other stuff continues to go on. Hopefully the way I tackled this problem with an infinite timeline, doesn't turn out to be a XY problem.

 

But I can also see it for a buzz-saw rotating, a hand poking/hinting at pushing a button over and over, sun continuously rotating its rays, character blinking, ambiance light flicker, a clock in the background, tail wagging, step-by-step instructions that repeat over and over before you press "next", etc. While some of those can be replaced with a CSS animation, GSAP's power and control would be lost. 

 

The reason `tl.recent().endTime()` becomes cumbersome, even after being wrapped up nicely, is because everything has to have a explicit position after the infinite timeline gets added. It becomes a fiasco of having to have explicit positions and `.addLabel` everywhere. 

 

 

Can a plugin wrap up this non-blocking infinite timeline functionality? As long as it is possibly to shove the gritty details behind a library and have everything work awesome, this could be a great solution.