Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Josh Mathis

Click animation always applied to last element

Go to solution Solved by Carl,

Recommended Posts

I have no doubt I'm missing something completely obvious here, but I've stared at it so long I can't seem to catch it. Basically, trying to create a simple accordion open/close animation. The animation is fine, but for whatever reason it's only applying to the last item. I'm still new to GSAP, so if while someone is looking at things, if there's a cleaner/better way to do this in general, i'd love to hear that as well. Thanks for any and all help!

See the Pen zYPOaJd by joshmath (@joshmath) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Josh Mathis

 

Thanks for the demo. 

You were really quite close.

 

To get around ONLY the last item opening and closing it was just a matter of declaring the tl variable with let like so on line 13

 

let tl = gsap.timeline({ paused: true });

 

After that it seems to work fine.

 

if you want to just toggle the open and closed state of each faq independently on click you can simplify your click code a lot like this

See the Pen QWOLoyK?editors=0010 by snorkltv (@snorkltv) on CodePen

 

If you want to automatically close the open item every time you open a new item you can do something like this

See the Pen eYeOXRV?editors=0010 by snorkltv (@snorkltv) on CodePen

 

 

Notice how I'm assigning an "animation" property to each faq. This makes it easy to target a particular faq and its animation.

 

  • Like 4
Link to comment
Share on other sites

I recently updated my second demo. my first attempt was rushed and I had some convoluted logic on the clicks. new version is much cleaner.

  • Like 3
Link to comment
Share on other sites

@Carl Thanks so much for the help and the very quick response! I knew it was going to be something simple like that, but I'd looked at it too long for me to ever see it. And thanks for giving me both options -- close on click and close on expanding another section! I knew what I had wasn't there yet, but I couldn't troubleshoot it without getting the other part working. So thanks for saving me the time there too. I'm not totally sure why it works to set the timeline to start in the reverse state, but I do get that it works and the use-case for it. If that's in the docs somewhere and someone wouldn't mind providing a link, I'd love to read on it further. Anyways, your help got me there Carl, and it is very much appreciated!! 

  • Like 1
Link to comment
Share on other sites

very glad to hear the demos helped

 

8 hours ago, Josh Mathis said:

I'm not totally sure why it works to set the timeline to start in the reverse state

 

no problem. the key is to first understand the next line

 

faq.animation.reversed(!faq.animation.reversed())

 

which basically says "make the reversed state the opposite of what it currently is" which is kind of like saying "make the opened state the opposite of what it currently is".

 

opened means the timeline has played

closed means the timeline has reversed

 

since the faqs all start "closed" we need the timelines to be reversed so that when we set the reversed state to be the opposite they will play forward and open.

 

Hope that helps!

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

@CarlThat's a great explanation and I appreciate you taking the extra time to explain it for me. It would have never occurred to me to approach it like that, but it makes total sense. Thanks man!

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