Click to Show/Hide 'Jerk' Issue

The animation ‘jerks’ itself out on first click, but subsequent clicks are normal. I’ve tried it on both published site and in the webflow designer & on both safari and chrome. I have attached GIFs on the issue below.

On chrome the issue appears to be more serious:

When I click on the Questions for the first time, it jerks out without animation. Then I click again to make it hide. When I click on the Question for the second time, the animation works.

On safari, the issue is slightly smoother, but nonetheless you can see the text appearing first on the first click:

It might be difficult to spot the issue here in safari, but if you look closely, you can see the Answer text appearing faster, and overlapping with the next Question text (blue text) on first click.

Any thoughts on the issue?

Here is the preview link: https://preview.webflow.com/preview/drheathermcleod?preview=113b547921bb8b57e78654e701699637

And published link: drheathermcleod.webflow.io

Hi @mrhedgie, thanks for the post! I took a look, and there are a few changes to make to the interactions. On the faq hide interaction I would set the intial appearance to display none and also 0px height.

I would also set the faq-wrapper-wrapper class to overflow hidden.

I made a quick video, I hope this helps :slightly_smiling:

1 Like

thanks again @cyberdave!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.