Blue - v0.0.64
Animate: Implement AnimeJS
This mega update implements anime.js to power the Animate
component. The animation sequencing setup has been overhauled with additional lifecycle hooks provided by react-transition-group.
These hooks (props) are:
- onEnter
- onEntering
- onEntered
- onExiting
- onExit
- onExited
Which correspond the the specified animation sequence (if available).
Dat Bounce
This update also provides a new elastic/bounce animation curve, which is used by default (with the exception of opacity
based animations).
Component API change
Note, the Animate
component's sequence
prop did receive some changes. The fadeIn
sequence has been renamed to fade
. Below are a list of sequences. Like before, they can be used by themselves or combined:
- down
- downSmall
- fade
- left
- right
- scale
- scaleBig
- up
Other than that, nothing needs to be adjusted for Animate
or AnimateGroup
Resolves: #69
Modal: Fix overlapping UI for scrollable content
This update adjusts the width of the Scrollable faders and the position
of the CloseButton for Modal. Previously, these elements had fixed
sizes/offsets, which overlapped with the (native) scrollbar that appears.
To remedy this, a util function was added to calculate the web
scrollbar width, determined by the OS. Calculcations where then added
to inline styles when applicable.
This update also fixes the Modal scroll bug, introduced by the
AnimeJS integration.
Resolves: #141