BenjaminO Posted April 10, 2022 Share Posted April 10, 2022 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 More sharing options...
mvaneijgen Posted April 10, 2022 Share Posted April 10, 2022 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! 5 Link to comment Share on other sites More sharing options...
Carl Posted April 10, 2022 Share Posted April 10, 2022 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 5 Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 10, 2022 Share Posted April 10, 2022 @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 5 Link to comment Share on other sites More sharing options...
Solution BenjaminO Posted April 11, 2022 Author Solution Share Posted April 11, 2022 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 😁 1 1 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