Motion / Animations / Transition

[andresin87]

TBD# @s-ui/react-atom-toast: Cannot stack multiple events

Currently, @s-ui/components does not have any animation approach.

Our current situation is that we currently only have:

// Settings for the SUI Motion Tokens

// Duration Tokens --------------------
// Naming & timing reference: Polaris Design System https://polaris-tokens.herokuapp.com/
$duration-none: 0 !default;
$duration-fast: 100ms !default;
$duration-normal: 300ms !default;
$duration-slow: 500ms !default;

// Aliases to follow the Emmet naming convention
$dur-none: $duration-none;
$dur-fast: $duration-fast;
$dur-normal: $duration-normal;
$dur-slow: $duration-slow;

// Timing Function Tokens -------------
// We define the default timing fuctions as a Cubic Bézier
// to have more control and a consistence naming with other
// custom timings functions.
$timing-function-linear: cubic-bezier(0, 0, 1, 1) !default;
$timing-function-ease: cubic-bezier(0.25, 0.1, 0.25, 1) !default;
$timing-function-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) !default;
$timing-function-ease-in: cubic-bezier(0.42, 0, 1, 1) !default;
$timing-function-ease-out: cubic-bezier(0, 0, 0.58, 1) !default;

// Aliases to follow the Emmet naming convention
$tf-linear: $timing-function-linear;
$tf-ease: $timing-function-ease;
$tf-ease-in-out: $timing-function-ease-in-out;
$tf-ease-in: $timing-function-ease-in;
$tf-ease-out: $timing-function-ease-out;

// Transitions
$trs-default: $duration-normal !default;

sui-theme motion.css

The main goal is to have a way to tackle:

• animation-property:
• animtion-timing-function:
• animation-duration:

Possible animations:

• Slide
• Grow
• Fade
• Zoom
• Collapse
• ...

UI:

• chakra-ui transitions
• mantine-ui transition

Animation react libraries:

• react-spring
• react-move

Animation css libraries:

• animate.css
• motion-ui
• micron.js
• hover.css

Decision

Rationale

There are many different components that are currently creqating its own simple animation. The main goal is to apply DRY and also SRP to tackle that.

Status

Consequences

• Review all component transitions and refactor it if its needed

[andresin87]

https://github.com/brillout/awesome-react-components#ui-animation

[andresin87]

data-driven-motion

uses import {TransitionMotion} from react-motion and centralizes it on a Motion unique class component.
❌

[andresin87]

react-animatable

"version": "0.10.3",
64 weekly downloads
5Jun 2022
❌

• uses hooks. define the styles and settings of the animation and return a factory to set the ref to the transitioned element target.

[andresin87]

react-anime

v4.xx
Weekly Downloads 4688
no website
not enough documentation

[andresin87]

react-motion

"version": "0.5.2"
no website
not enough documentation

[andresin87]

react-spring

"version": "9.5.0",
Weekly Downloads 809.677
well documented

Bundlephobia

53.6 kb MINIFIED
19.4 kB MINIFIED + GZIPPED

[andresin87]

Framer motion

Weekly Downloads >1M3k
extremly well documented

Bundlephobia

156.4 kB MINIFIED
50.9 kB MINIFIED + GZIPPED