search

ingram-projects / animxyz

The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
https://animxyz.com
MIT License
2.42k stars 56 forks source link

Website docs - overflow hidden to improve experience #79

Open arimus opened 2 years ago

arimus commented 2 years ago

Just an FYI, getting lots of rough animations because the right panel occasionally overflows and shows a horizontal scrollbar which ruins the otherwise slick effects.

One such spot this element:

Setting overflow to hidden makes the chat example smooth.

For the record, using Chrome Version 95.0.4638.69 (Official Build) (x86_64).

p.s. Awesome library and glad to have found it. And if you get to the point where you'd like to support an Angular library as part of this repo and could use some assistance, let me know. Cheers.

mattaningram commented 2 years ago

Thanks for the kind words @arimus! We would definitely like to support Angular, although neither of us are very familiar with its element transition system. Open to ideas and contributions there!

Regarding the overflow on the right panel, can you tell me what resolution/width you are viewing the page at when it happens? Also do your scrollbars autohide or are they always visible when available?

arimus commented 2 years ago

On a MacBook Retina first gen (2880 x 1800), with Chrome full screen. The scrollbars only show up for a fraction of a second (e.g. they flash in and then back out). Generally, I've seen this when there is temporary overflow during rendering for one reason or another.

Btw, here's what it looks like - 1MB Video

Re: Angular, I'll take a look. I've integrated the basics into my app already.

p.s. Love the docs and animation builder examples in there. It might also be nice to provide a mechanism for some more common animations / chained animation out-of-the box (e.g. https://animate.style/)