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.