Jump to content
Search Community

mouse event playing another timeline

Dizablah The Lamot test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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!

 

 

Link to comment
Share on other sites

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.

:)

 

  • Like 3
Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...