search

formkit / auto-animate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
https://auto-animate.formkit.com
MIT License
12.89k stars 227 forks source link

`overflow: auto` displays scrollbars during animation #16

Open ty-bt opened 2 years ago

ty-bt commented 2 years ago

windows chrome 102.0.5005.63

https://codesandbox.io/s/naughty-butterfly-ze3mcu?file=/src/App.js

When overflow is auto, the scroll bar will flicker during animation Subsequent animation flickers after scrolling scrollbar manually 333

justin-schroeder commented 2 years ago

Not sure there is a good solution to this other than setting your styles appropriately. I dont think we can make any reliable determination of what the users desired styles are here. For example, we could put overflow: none durring the animation, but that would make the parent's scrollbars pop on/off during animation when there should be a scroll bar. Open to suggestions though.

ty-bt commented 2 years ago

@justin-schroeder And the first animation after moving the scroll bar will be abnormal

Daneng66 commented 1 year ago

@ty-bt Did you figure out a solution for this?

glekner commented 2 months ago

Not sure there is a good solution to this other than setting your styles appropriately. I dont think we can make any reliable determination of what the users desired styles are here. For example, we could put overflow: none durring the animation, but that would make the parent's scrollbars pop on/off during animation when there should be a scroll bar. Open to suggestions though.

@justin-schroeder why not do the following:

  1. before starting the animation, we determine if the container has overflowing content or not for each axis (e.g. is p.scrollHeight > p.offsetHeight)
  2. only if there is no overflowing content, we can safely add overflow: hidden until the animation finishes.