Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
celli

Make a GSAP timeline active and Inactive when clicking other items

Recommended Posts

Hi,

 

I am trying to figure out two things on my codePen link.

 

1. When you click a dot, it scales down to 2 -- but I am trying to figure out how to make that dot inactive, so that the mouseover and mouseout functions would not run on that specific dot while it is active.

2. The line and date animations can still run now (even if the item is active), but I am trying to figure out how to limit the GSAP animations to run only if the item is inactive

See the Pen MMwpjx by celli (@celli) on CodePen

Link to comment
Share on other sites

Hey PointC !

 

Thanks for responding :)

 

I was trying to avoid jQuery, even though I am using it in this example I was going to try and convert those instances without using jQuery, if possible.

 

I thought maybe there was a way to play the GSAP instances once, and then reset them when the item is inactive again.

 

If you think the jQuery on and off methods would be the way to go, then maybe I'll keep it while using jQuery, but how would I integrate that into my GSAP timelines?

Link to comment
Share on other sites

Oh, I only suggested .off() because your example used jQuery. I personally skip jQuery on most projects. 

 

For a vanilla approach you could loop through and add the mouseenter/leave listeners and then just remove them while a particular dot is active. 

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener 

 

:)

 

 

 

  • Like 1
Link to comment
Share on other sites

Thanks PointC ! I will try this and reply back when it is working.

Link to comment
Share on other sites

I am having some trouble with adding and removing the addEventListener, it says it can't read a property of a null.

 

This is not GSAP related, so I can keep trying to see what works

Link to comment
Share on other sites

I can take a peek for you. Is there a new demo?

  • Like 2
Link to comment
Share on other sites

Yeah, addEventListener isn't gonna work with a jQuery object like that. 

 

Here's a quick starter demo to loop through a node list and add a click listener without any jQuery involved.

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

 

Does that make sense? 

 

Happy  tweening.

:)

 

  • Like 1
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.
×