OddSite 4.0.0

Animation Config

Accoutrement maps for storing global animation tokens.

Related

Accoutrement Scale [external]

$times (map)

scss 
$times: (
  'fast': 150ms,
  'mid': 300ms,
  'slow': 3000ms,
);

Named times to be re-used in animations.

$changes (map)

scss 
$changes: (
  'colors': (
    color time('fast') ease-out,
    background-color time('fast') ease-out,
    text-decoration-color time('fast') ease-out,
  ),
  'move': transform time('mid') ease('_out-back'),
  'pop': box-shadow time('fast') ease('_in-out-back'),
  'fade': opacity time('fast') ease-out,
  'underline': text-decoration-thickness 150ms ease-out,
  'fadein-out': fadein-out time('slow') ease-out,
);

Named transition and animation definitions that can be re-used to create consistent movement across the site.