Accoutrement 4.0.5

Combined “Change” Maps: Animations & Transitions

Combine your $times and $easing values to create entire transitions and animations – all stored in one place and easy to access for consistent “changes” across your project.

$changes

scss 
$changes: () !default;

A variable storing the map of all your standardized changes (transitions and animations). Any changes added to the $changes map will be accesible to the change() function by default.

Define each change with a name and value, or use interpolation to compose more complex changes.

$changes: (
  // single animation
  'glow': glow time('slow') ease('in-out-quad') infinite alternate,

  // single transitions
  'slide': transform time('fast'),
  'fade': opacity time('fade') ease('out-quad'),

  // interpolate using '#name' (quotes optional)
  // to build on existing "changes"
  'slide-in': #slide ease('out-back'),
  'slide-out': '#slide' ease('in'),

  // or string together multiple "changes"
  'sidebar-in': ('#slide-in', '#fade' time('delay')),

  // or create a 1-to-1 alias
  'modal-in': #sidebar-in,
);
  • Name your changes anything – from abstractions like fade, to concrete patterns like sidebar-in.
  • Values can be CSS-ready values, references other changes in the map, or format strings to interpolate.

Used By

@mixin add-changes()

@function change()

Access a named change in your $changes map.

Since 1.0.0:

  • NEW: Accepts $do map argument, for on-the-fly adjustments
  • NEW: Accepts $source map argument, for custom source-palette

Parameters & Return

$name: (string)

The name of a change in your configuration (e.g. fade-in)

$do: null (map | null)

A map of function/ratio adjustments to run on the returned value

$source: $changes (map)

Optional Accoutrement-format map of changes to use as the origin palette

@return (length)

The change value requested

Requires

@function get() [private]

Used By

@mixin animate()

@mixin transition()

@mixin add-changes()

Merge individual change maps into the global $changes variable, in case you want to define changes in smaller groups – such as button-changes, page-changes, etc – before merging them into a single global changes-palette.

Parameters & Output

$maps: (map...)

Pass any number of maps to be merged and added

{CSS output} (code block)

  • An updated global $changes variable, with new maps merged in.

Requires

@function multi-merge()

$changes

@function compile-changes()

Compile all the tokens in a change map. This is particularly useful for exporting a static version of the token map with all the Accoutrement syntax removed – e.g. for use in javascript or documentation.

Since 4.0.0:

  • NEW: Provides an export option for change token maps

Parameters & Return

$map: $changes (map)

The map to be compiled

$source: $changes (map | null)

A map of reference tokens that can be used for resolving changes. (defaults to the global $changes map)

@return (map)

A copy of the original map, with all token values resolved

Requires

@function map-compile-with()

@mixin animate()

Access named animations in your $changes map, and apply them to the animation property.

Parameters & Output

$names: (string)

Named animations to apply

{CSS output} (code block)

  • The requested animations, applied in CSS

Example

scss 
tools.$changes: (
  'fade-in': fade-in 300ms ease-out both,
);
.example {
  @include tools.animate('fade-in');
}
css compiled 
.example {
  animation: fade-in 300ms ease-out both;
}

Requires

@function change()

@mixin transition()

Access named transitions in your $changes map, and apply them to the transition property.

Parameters & Output

$names: (string)

Named transitions to apply

{CSS output} (code block)

  • The requested transitions, applied in CSS

Example

scss 
tools.$changes: (
  'fade': opacity 300ms ease-out,
);
.example {
  @include tools.transition('fade');
}
css compiled 
.example {
  transition: opacity 300ms ease-out;
}

Requires

@function change()