Jump to content
Search Community

gsap.utils.toArray

celli test
Moderator Tag

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 comment
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 comment
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 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...