This is an in-progress React tool for CSS animation timing functions(easing) based on cubic beziers, inspired by great tools like cubic beziers.com and easings.net.
At the moment the curves can only be compared and not edited.
- Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
- Source code on GitHub
Just added an expand/collapse animation to the voters widget body.
To accomplish this a CSS transition on the max-height property was used.
I’ve had to make some changes to the Body component to wait for the end of this transition before loading the visible avatars, to have the container viewport reached its final hight.
Notice how the vertical scrollbar track is now always present even when it would not be needed. This is to prevent visual glitches for few-votes widgets where the scrolling is it not needed.
Another point to note is how the max-height transition to 50vh causes a too fast expansion on low-votes widgets, typically when there is only a row of avatars.
Additionally, it was added a zoom transition when hovering on the avatars(the images are very tiny though, 30px, so the zoomed version is a bit blurry) and now the voter profile page opens in a new tab.