I have a animation for an FAQ accordion which has two animations “Open” and “Close”. The FAQ has a question and an answer and there are four of these items. Before creating the animation, I have hidden the FAQ answer. On the “Open” animation, the FAQ answer is initially set from “Hide” to “Show” (display: block turned on) and then the arrow rotates -180 degrees. The next step is to change the background and text colours. This concludes the “Open” animation. The “Close” animation does the opposite of this. On my animation, only the FAQ answer “show” and the arrow “rotate” works and the other steps do not work. I tried “Set as initial state” on the first step of the “Open” animation but it did not give me the expected result. I tried editing and redoing the animation 5 to 6 times but ended up getting stuck. If someone can help me to get this animation to work, that will be very helpful.
I can see you have added an interaction to the first FAQ item, just as a note, you can shift the choice of animation for each click so that it works right from the start.
So, for the 1st click you can link ‘Animation open’ animation and for the 2nd click you can link ‘Animation close’ (instead of the current setting) and it should work as you expect it to.
Thanks for your reply to my forum question on the FAQ animation. I am not sure what you mean when you say “for the 1st click you can link ‘Animation open’” and for the “2nd click you can link ‘Animation close’”? What I did was create a timed animation by doing the following: 1) Element trigger → Mouse click (tap) 2) On 1st click → Start an animation 3) Create a new timed animation 4) Added a name for the animation, i.e. “Animation open” and then added the steps for the timed animation and clicked either “Save” or “Done”. I repeated the steps for the “On 2nd click” and then created a new timed animation called “Animation Close” and created the steps. Isn’t this the way to create a simple animation on Webflow? Not sure what else I need to do? I did try the “Set as initial state” option but that did not make the animation work either. The problem with the animation is the only the first two steps of the “Animation Open” works, which are “Showing the FAQ item answer” and the other one is rotating the drop down arrow. The 3rd and 4th steps of the animation, which are changing the background color as well change of text color do not work as far as I know. Please let me know the answers to the questions I have asked and clarify what you mean by “linking the animation” and also whether I missed any of the steps while creating the animation.
What I mean is, I saw that ‘On 1st click’ you had selected ‘Animation close’ and ‘On 2nd click’ you had selected ‘Animation open’. Currently both clicks have ‘Animation open’ selected under the Interactions tab.
So, you can just select the appropriate animation as highlighted below for 1st and 2nd clicks.
That being said, to ensure that the color and background color actions work for the FAQ item, you need to reset ‘Color’ under Typography and ‘Color’ under Background so that your animation works.
Here’s an example of what I mean. For the FAQ item question element, you can reset the Color values by clicking on the text ‘Color’ and you will see an option to ‘Reset’, you can click on it, so that it inherits Primary color as text color and transparent color for background without you needing to specify it.
Thank you for your reply and assistance to fix the FAQ animation. I fixed the animation steps for “Animation Option” which works on 1st Click as I expected. Before I fixed the “Animation Open”, I deleted the already existing “Animation Closed” so that I can start the “Animation Close” once I am happy with the “Animation Open”. After I was happy with “Animation Open” I used “On 2nd Click” option to create a new timed animation called “Animation Close”. Now I see both “Animation Open” as well as “Animation Close” on both 1st click and 2nd click. So, I decided to delete “Animation Open” from the 2nd Click option, but it gets deleted from both “1st click” as well as “2nd click”. I had to undo this by using “Control Z” on my keyboard. The same things happens when I try to delete “Animation Open” on 2nd click.
Not sure why this is happening and how do I fix this problem? Sorry for bother with repeated questions on the same issue. If you can help me answer this, it will be very helpful. See screenshots attached.
You do not need to delete an animation from the list, to ensure that the ‘Animation open’ works for 1st click and ‘Animation close’ works for 2nd click, you just need to click the animation from the list accordingly (it works like a radio button). The list just is a common one to show what are all the available animations that you can select for the click based interaction.
So if your interactions looks like below, it should be good to go.
