Jump to content
GreenSock

BenjaminO

Toggle Animation GSAP

Go to solution Solved by BenjaminO,

Recommended Posts

Hello folks, ūüĎ謆

 

I am trying to reproduce all the behaviors saw in FAQ section from (https://www.nikki-kay.com/about) with toggle animations. Unfortunately, I have quite a lot of small annoying weird behaviors that I didn't figure out.

- When I trigger buttons, all my <p> are animating even when I try to target them specifically. (this should only happening when targeting the first button).

- Reverse animation is not played smoothly (only when I click multiple times on the buttons).

- Arrow animation not played sometimes (first click).

 

Thank you all in advance ! 

See the Pen ExoRXOz by benjamOD2 (@benjamOD2) on CodePen

Link to comment
Share on other sites

Hey, what I would do is create an animation for each question. I did this by giving all your questions a class of '.question' to make it easier to get them  with Javascript. Where you did a for loop of each button addEventListener I started with the question class and made a `.forEach` loop and made this my start point, this makes it easy to get all the elements in that parent.

 

See the Pen YzYveVO?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

 

 

Right now the 'see all' animation toggles the animation, so if one of them is open that one will close and the others will open, but that logic is easily fixed. I'll let you handle that one, also each button doesn't get the class `.active`, there are a lot of cool callback functions with each timeline, so maybe adding and removing the class `.active` could be part of the timeline, see https://greensock.com/docs/v3/GSAP/Timeline

 

Good luck and don't be afraid to comeback and ask for help when you're stuck!

  • Like 5
Link to comment
Share on other sites

i would most likely do something  very similar to what  @mvaneijgen provided above.

 

However, it's also worth looking at this demo from @OSUblake which relies on the Flip Plugin and requires very little code. 

 

See the Pen pormXeP by GreenSock (@GreenSock) on CodePen

 

Also, I imagine you were just experimenting, but be careful trying to implement code like this
 

let tween = gsap.timeline(pTarget)

tween.play(pTarget)

 

it isn't part of the API to pass elements into those methods

  • Like 5
Link to comment
Share on other sites

@Carl that is a really cool! I really need to take a better look at the Flip plugin some of these days.

 

In the mean time I've add an 'see all' button to @OSUblake to see if that works how I thought it would and it does!

 

See the Pen gOoKzrG?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 5
Link to comment
Share on other sites

  • Solution

Hello guys,

 

Thank you both for your ideas !! I finally got what I wanted and even if that's not the prettiest code, it's working quite well. I took your first submission as a base @mvaneijgen¬†even though the flip plugin might be interesting as it requires less code. I let you my results updated here! Thank you all again ūüėĀ

See the Pen ExoRXOz by benjamOD2 (@benjamOD2) on CodePen

 

  • Like 1
  • Thanks 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.
√ó