Unwanted interaction flickers

having a trouble with an interaction, i set a button to open and close a form when clicked on, it works, i also put a x in the corner of that form to close the form, that works also.

my problem is when i open the form with the button, then press the x, then press the button it flickers the form and i have to click it again to open it. i understand ( i think ) why this is happening, its based on first and second clicks and having circumnavigated that with the X close button.

my question is how do i get around this? or fix it?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @hogarth_heathan could you please share your Read-Only-Link? I will have a look at it.

i should have done that from the start, thanks

https://preview.webflow.com/preview/hogarths-stupendous-site?utm_medium=preview_link&utm_source=designer&utm_content=hogarths-stupendous-site&preview=dd742ee0ddebbd017a45fdc51177307b&pageId=652cb22bb62af154c4516a11&workflow=preview

The flickering appears, because you have set the element to display none and block in the same animation at the same time:
Screenshot 2023-10-16 at 15.35.08

Change the animation “form slides out” like this:

Don’t forget to check the checkbox at “Set as initial state”

Change the animation of the “close form” like this:


Don’t forget to change the target to “All Elements with this class”, that’s important for the next step.
Go to the Element “form close button” and delete the currently assigned animation and change and assign the animation “close form”.

thanks for the help, animations are probably the most frustrating confusing thing to learn on here.
im not sure how to assign an animation to an element, so i just made a new one. also i followed your steps and the flicker still happens if i open the form, close with the x and open again with the button.

is having display none and block not a good thing with the same animation, i thought it was nessecary to make something appear and disappear, you took out the first hide/show but then that just leaves a big white space where the form should be, or did i miss something?

im confused as to why you deleted one of the opacity triggers, and confused as to which one i should keep. after i deleted one or the other the animation didnt work

i read over and followed your steps to the letter, or so i thought,i appreciate your help, this is confusing.

https://preview.webflow.com/preview/hogarths-stupendous-site?utm_medium=preview_link&utm_source=designer&utm_content=hogarths-stupendous-site&preview=dd742ee0ddebbd017a45fdc51177307b&pageId=652cb22bb62af154c4516a11&workflow=preview

Sorry, I just saw that my Screenshots are cut out at the bottom, but you nearly got it.
I also adjusted the animation a little bit.
Change it like this and it should work.

Animation “Form slides out”:




Animation “close form”:


Last step: Assign the animation to the close button like this (Currently there is no animation assigned):

Yes, you are right, animations are a bit hard to understand. But once you understand it, it’s quite simple. Think of it like a timeline. The first action you enter is the first action the browser will perform later as an animation.
If you do it like shown in my example, you create one Animation to open the form and one to close it.
Before you had one animation to open the form and two to close ist. That’s not necessary. It’s better to reuse the same animation.
Let me explain what I did in the “Form slides out” Animation:
First I set the opacity to zero and display to none.
The reason for this is that this way you can still see and edit your form in the Webflow designer (You don’t need to set these properties in the designer to hide the form from the beginning)

In the next step I set the display property to flex.
If I stopped at this step, the form would still not be visible because the opacity is still zero. So in the next step we need to change the opacity to 100%. This way we can fade the form in. Switching between “display none” and “flex” would cause the form to appear and disappear immediately.

I hope my explanation helps you, otherwise please ask.

thanks for your help it worked, and it helped me understand the animations alot better. i decided to only have the button for to open and the X to close it, having the button to open and close created a double click “bug”.

again thanks for you help, much appreciated.

1 Like