mouse event playing another timeline

[Dizablah The Lamot 4 Likes (Newbie)]

My goal is to get the yellow arrows, after they are done with their initial timeline, to react to mouseenter and mouseleave. When I try to set AddEventListeners nothing works and if I comment them out, only the first timeline runs. I am pretty sure that I need to call the 2nd timeline from a function when the first timeline runs but that's a different thing. When I comment out the 1st timeline the 2nd timeline runs no problem. But if I uncomment everything out nothing works. 

Am I even approaching this in the right way? I should be able to run a timeline on a mouseEvent yeah? I've taken @carl advice and have tried to make the codepPen as stripped down as I could. Let me know if that's' still too much or not enough. 

TIA, 

Diza

See the Pen zYpZrxG by Dizablah (@Dizablah) on CodePen

[PointC 14,185 Likes (Superhero)]

Hi @Dizablah The Lamot

 

I was having a little trouble following your demo. You have a querySelector for "ya" but no element by that ID. There is however a timeline named "ya" so I was just a little confused abut the desired result. 

 

I made a quick little demo to show how to add a listener after a timeline completes. I've just used a simple div that scales up from 0. We also have a paused timeline for an opacity change. You can see that onComplete calls the function to add the enter/leave listeners to play/reverse the extra timeline. 

 

See the Pen LYeQzWo by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening. 

[Dizablah The Lamot 4 Likes (Newbie)]

1 hour ago, PointC said:

Hi @Dizablah The Lamot

 

I was having a little trouble following your demo. You have a querySelector for "ya" but no element by that ID. There is however a timeline named "ya" so I was just a little confused abut the desired result. 

Ah, I thought that by creating a timeline named ya (probably need to start naming my timelines a little better) I would be able to run through that timeline on a mouseEvent

 

Thanks so much for the demo. Definitely helps!

And a' tweening I shall go!

 

 

[PointC 14,185 Likes (Superhero)]

28 minutes ago, Dizablah The Lamot said:

Ah, I thought that by creating a timeline named ya (probably need to start naming my timelines a little better) I would be able to run through that timeline on a mouseEvent

Yes, you can control that timeline with a mouse event. Once you create a reference to a tween/timeline you can control it with several methods. play(), pause(), reverse() etc...

 

There's no need to select it after you create it. So in your case:

const ya = gsap.timeline({paused:true});
ya.to(yourTarget, {...});
// then you can control it
ya.play();

Make sense?

 

Happy tweening.

 

[Dizablah The Lamot 4 Likes (Newbie)]

On 4/5/2022 at 6:59 PM, PointC said:

Yes, you can control that timeline with a mouse event. Once you create a reference to a tween/timeline you can control it with several methods. play(), pause(), reverse() etc...

 

There's no need to select it after you create it. So in your case:

const ya = gsap.timeline({paused:true});
ya.to(yourTarget, {...});
// then you can control it
ya.play();

Make sense?

 

Happy tweening.

 

 It makes sense now! 😁

So I need to create the reference and/or the timeline before I can start to affect it, yeah?