IsActive() is only true for the last added timeline.

[Ahmad Sherazi]

Greetings,

 

My code have a timeline which have two instances of another timeline (Moving up timeline) added to it by add function. There is a wheel event which tells me whether the added timeline is active or not. However in the console, active becomes true only for the last instance of timeline and remains false for first instance.

 

It's bit harder to explain, apologies for that however if you see in the code pen example. You will see that when the first image is moving down, and wheel event is triggered it displays false, but for the second it display true.

 

Let me explain the code, kindly forgive me for the fact that it's long but this is the max I could shrink it. 

1. LoadImages Function can be ignored as it only load two images and send a promise back so that canvas have loaded both of image.

2. MoveImage function simply draws images on canvas repeadedtly. (This is call in the update function of my MovingDown Timeline for animation).

3. In the then call of my LoadImages function, is the main part where I have made a timeline and adding two instance of moving down timeline in it. (and an event listener of wheel)

 

See the Pen KKzWbVr by ahmad-sheraz (@ahmad-sheraz) on CodePen

[ZachSaucier]

Hey Ahmad and welcome to the GreenSock forums. 

 

Image_Animation_Timeline is scoped to window, so the first one is overwritten by the second one. You should scope it to the instance instead. Alternatively, just loop through the sub-timelines in the master timeline instead:

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

 

Side note: We highly recommend you use the GSAP 3 syntax: