Animation Config
Accoutrement maps for storing global animation tokens.
Related
Accoutrement Scale [external]
Times
Named times to be re-used in animations.
Example
scss
@use 'config/animation/times';
@use 'config/tools';
@use 'sass:meta';
@each $name, $time in tools.compile-times(meta.module-variables('times')) {
/* #{$name}: #{$time}; */
}
css
compiled
/* fast: 150ms; */
/* mid: 300ms; */
/* slow: 3000ms; */Changes
Named transition and animation definitions that can be re-used to create consistent movement across the site.
Example
scss
@use 'config/animation/changes';
@use 'config/tools';
@use 'sass:meta';
@each $name, $change in tools.compile-changes(meta.module-variables('changes')) {
/* #{$name}: #{$change}; */
}
css
compiled
/* animate-colors: color 150ms ease-out, background-color 150ms ease-out, text-decoration-color 150ms ease-out; */
/* move: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); */
/* pop: box-shadow 150ms cubic-bezier(0.68, -0.55, 0.265, 1.55); */
/* fade: opacity 150ms ease-out; */
/* underline: text-decoration-thickness 150ms ease-out; */
/* fadein-out: fadein-out 3000ms ease-out; */