Using timeline to orchestrate non-GSAP operations

[Desmond]

I'm wondering what it would take to use TimeliteLite (or TimelineMax) to orchestrate a mix of GSAP and non-GSAP operations.  To outline a very simple example:

 

1. execute a tween
2. when that finishes, play an audio file
3. when that finishes, execute another tween

 

I suppose that one way to have that audio participate in the timeline is to put a facade around the audio player, which would implement the tweenlite interface such that the timeline wouldn't know the difference.  But that feels like a bunch of work.  I realize that not every method that a tweenlite object supports would necessarily translate to an audio player (or would be worth implementing) but I would only need the basics.

 

Is there another way?  Am I thinking about this problem the right way?

 

Any thoughts would be greatly appreciated.  Thanks!

[Jonathan]

Hello @Desmond and Welcome to the GreenSock Forum!

 

This is possible using GSAP callbacks like onComplete, onStart, or onReverse in your tweens or timelines.

 

For example, this codepen shows how you can trigger a non GSAP operation like playing a video after a tweens animation completes:

 

See the Pen NbWPWB by jonathan (@jonathan) on CodePen

 

Happy Tweening

 

Resources:

TweenMax Docs: https://greensock.com/docs/TweenMax

TimelineMax Docs: https://greensock.com/docs/TimelineMax

 

[Sahil]

It depends a lot more on what you are doing. You can use onComplete callback to do something when tween ends. Then play tween when you are done with non-GSAP stuff.

 

TweenMax.to(elem, 1, {onComplete: function(){
	// do something
}})

 

That is very basic answer to your question.

 

1. Assuming you are talking about music player and doing same animations again, you can tween something then onComplete call a function. Then repeat the process and use your custom logic on callback function.

2. If your animation isn't constant then you will have to regenerate tween/timeline to change your animation.

3. If it is more complex then you can use functions, and use GSAPs built in method for delayed callbacks etc,

Quote

TweenMax.delayedCall( delay:Number, callback:Function, params:Array, scope:*, useFrames:Boolean ) : TweenMax

 

[static] Provides a simple way to call a function after a set amount of time (or frames).

 

I love using it because it gives you a lot more control.

[Sahil]

Here is one way you can use timeline's call method for non-GSAP stuff. Though I am not sure if it is alright to use timelines like this.

 

See the Pen POKqWq?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

@GreenSock @Carl Is it ok to pause timeline like this inside call method? Any other way to make timeline wait for call to return before it continues to next tween? Also, I tried using 'this' to self reference timeline to pause and play it didn't work. Console logging it made sense but wanted to know if there is another way to self reference timeline.

[Carl]

Hey Sahil,

 

What you are doing is totally fine. Here is an alternate approach using addPause()

 

See the Pen KyvWPL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[OSUblake]

Depending on what you're doing, another approach is to use promises.