celli Posted August 31, 2020 Share Posted August 31, 2020 Hi, I recently had another post and learned I can use this powerful tool, so I am using the GSAP utils.toArray in a new pen. I want to use it to effect only the element that I am clicking on. I am new to using this GSAP utility, so I must be doing something incorrectly because all of my elements are effected, instead of the one that I am clicking on only. Hoping someone can shed light on what I am missing. See the Pen poyrRZe by celli (@celli) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted August 31, 2020 Share Posted August 31, 2020 Inside your forEach() function.... // BAD $('.accordianRow').click( ... ) // applied to ALL elements with .accordianRow class // GOOD $(container).click( ... ) // applied to just the current one in the forEach() loop Does that clear things up? It has nothing to do with gsap.utils.toArray() 4 Link to comment Share on other sites More sharing options...
celli Posted August 31, 2020 Author Share Posted August 31, 2020 ahh yes, makes perfect sense, thanks Jack! I needed to change my click function to use an eventListener to actually make that work container.addEventListener("click", function(){ accordianClkTl.reversed() ? accordianClkTl.play() : accordianClkTl.reverse(); }); This way didn't work container.click(function() { accordianClkTl.reversed() ? accordianClkTl.play() : accordianClkTl.reverse(); }); Link to comment Share on other sites More sharing options...
GreenSock Posted August 31, 2020 Share Posted August 31, 2020 Notice my code had $(container), not just container. "click()" is a jQuery thing. Frankly, there's no reason to use jQuery at all in that demo, but some people are just used to it and like some of its conveniences which is fine. 2 Link to comment Share on other sites More sharing options...
PointC Posted August 31, 2020 Share Posted August 31, 2020 One to bookmark. http://youmightnotneedjquery.com/ 2 Link to comment Share on other sites More sharing options...
GreenSock Posted August 31, 2020 Share Posted August 31, 2020 Just a little tip: your event listener was totally fine but if you want to make it even more succinct you could do: container.addEventListener("click", () => accordianClkTl.reversed( !accordianClkTl.reversed() ) ); 3 Link to comment Share on other sites More sharing options...
celli Posted August 31, 2020 Author Share Posted August 31, 2020 great tips, thanks guys! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now