Little bug with interactions transitions

Hi guys!

I came to report a little bug that occurring when I use interaction transitions. Sometimes when I hover a element the smoth transition seems not work and make a hard transition, as you can see in the third and second block below. It’s happen in other projects too.

This is the preview link:
https://preview.webflow.com/preview/boulevard-shopping?preview=866e77db735510cad00763a77eb2aef9

This is my browser:
Google Chrome
Version 49.0.2623.110 (64-bit)

This is my OS:
OS X El Capitan
Version 10.11.3

Does it happen in preview only?

I witness that too, but I consider that sometimes it only happens in the designer, and when it happens in the published site, usually it’s only for me. Doesn’t happen on another computer etc. Like if it was a cache issue.

Hi @vincent!

No, in preview isn’t happen. Just in published site, but I look in other computers and the bug persists.
I don’t think it is a cache issue.

http://boulevard-shopping.webflow.io/

I see, it happened abt 10% of the time, about 4 times, and now I can’t make it happen anymore.

Yes, something like this.

I thought that could be a conflict with the css transition and the interaction transition but it’s not. I remove the css transition but nothing changes.

I discover when it happens but not how to fix it. Is when I set the div hight to “auto” on hover interactions. If I set a fixed value to height it not happen anymore but my div cannot be fixed height because the content is different in every box.

This seems to be a problem with CSS as you can’t animate to “auto”. The current hack would be to set a max height and animate the max-height to a large value (e.g.: height of largest element).

https://www.google.com.sg/search?q=css+transition+animation+height+auto

1 Like

Hi @samliew!

Thanks for the tip.
This hack works but not so smooth like the transition to height “auto”, because the ease can not be applied to all transition.

How did you do it in webflow? If you set a max height and continue to animate with height, it’s not doing anything different.

I remove the interaction and set just the css transition.

On normal state I set the max-height: 0 (or minimum of height that I need) and on hover I set max-height to the maximum of my block will be (like 400px).

Oh ok then, good to know.

Hey @douglasrpinho I believe the jumping interaction may be happening because when you go back to the hover over effect, the starting point has moved after the interaction has taken place.

Maybe try adding an additional step with 0ms set to the initial height of the element (in this case 26px) so that it matched the hover out height of 26px. :smiley: ​Please let me know if this solves the problem, if not, I’m happy to help further :slight_smile:

Hi @Waldo!

I follow your tips but instead of 0ms I set to 50ms and the problem seems to be solved! With 0ms the “jumping” still happening but in less frequency, so setting a little delay it is not happening anymore.

Thanks for your help!

1 Like

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