OddSite 4.0.0

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; */