Skip to content
This repository has been archived by the owner on Aug 21, 2023. It is now read-only.

Blue - v0.0.64

Compare
Choose a tag to compare
@ItsJonQ ItsJonQ released this 04 Dec 20:53
· 2965 commits to main since this release

Animate: Implement AnimeJS

screen recording 2017-12-04 at 12 43 pm

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

screen recording 2017-12-04 at 01 32 pm

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

screen recording 2017-12-04 at 02 52 pm

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