Jump to content
GreenSock

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

gsap.utils.toArray

Recommended Posts

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 post
Share on other sites

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() :)

  • Like 4
Link to post
Share on other sites

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 post
Share on other sites

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. 

  • Like 2
Link to post
Share on other sites

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() ) );

:)

  • Like 3
Link to post
Share on other sites

great tips, thanks guys!

Link to post
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.

×