Adding all tweens to one main animation - reasonable idea?

[kalreg]

Hi all.

I am working with GSAP for a couple of weeks and i am not sure if i use it correctly, however i love a way of creating the animation. Please advice me if what i want to achieve is a good way of doing it.

 

I have a project that has multiple divs that may be considered as buttons. Each button may be animated, but buttons may change its purpose and in consequence - also animations. Because all the buttons share some common parts of animations i decided to split most of the animations into parts. So one part will rotate button, other slide it, and other - scale it. So i have many parts of animation divided into separated objects. Now i can join bricks into one animation but depending on button's purpose i can rotate and slide it but not scale it, or only scale it and later - rotate it. Timeline of GSAP let's me do this easily.

 

There is sometimes a need of not starting an animation because another one is in progress. I can of course set some special variable that is always true if animation is in progress and false if there is no animation, however i'd like to do it with built-in animation methods that come with GSAP.

 

The idea is like this:

1. create main timeline.

2. any animation i want to play is immidiately added to main timeline - add tween/timeline to main timeline (let's call it anim1)

3. if main timeline is being played (because there is anim1 played) and next animation (anim2) should be played - add it to end of main timeline

4. if anim1 has been played and reached of it's end - start playing anim2

5. add anim3 which is special - it should be played immidiately. (dont add it at the and of timeline, but add it to "now". However it also must be added to main timeline because if anim3 will last longer than anim1 + anim2 it should not let play anim4 which may be added in a meantime. How to add it to "now" and play it imidiately ?

 

it would look like this:

 

A1 ------ > EA1

add A2

A1 ------ >EA1 - A2 -------> EA2

add A3 between A2 and EA2, it is special so it will play imidiately

A1 ------ >EA1 - A2 --- A3--> EA2 ---> EA3

add A4 before A3 ends

A1 ------ >EA1 - A2 --- A3--> EA2 ---> EA3 - A4 ------> EA4

 

 

Legend:

A1, A2, A3 A4 - start ot anim1, anim2 ...

EA1, EA2, EA3, EA4 - end of anim1, end of anim2 ...

 

 

Is that approach best way to achieve this? Do you have any other ideas to make this?

 

See the Pen MpErqj by kalreg (@kalreg) on CodePen

[PointC]

I'm sorry - I read that three times and I'm not understanding the question. It sounds like maybe you want to nest timelines into a master and play between labels? I'm honestly not sure what you're asking here.

 

The question about a built-in method checking for an animation part I can answer. You'd want to use the isActive() method.

 

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/isActive/

 

Maybe others can understand the other part of your question.

 

Happy tweening.

[kalreg]

So maybe in simpler words.

 

1. I want to have master timeline that is nesting other tweens.

2. Those tweens may be special or normal

3. normal tween is added to master timeline (at the end of it)

4. special tween should be played immidiately in moment it is added to master timeline (i know how to play it instantly, but it need to be added to master timeline.

 

The question is:

Is there any easy way to

 

masterTl.add(myTween, NOW)

 

I already coded it using  tl.duration() and tl.progress() - i caluculate what is current progress of animation vs duration and add -=result, but maybe there is any simpler way?

 

Hope it cleared a bit. 

[Carl]

sounds like you need time()

 

masterTl.add(myTween, NOW) would be

masterTl.add(myTween, masterTl.time())

[kalreg]

As always Carl, u solve first world problems Thank you.