Accoutrement 4.0.4

A classic set of built-in easing functions, if you don’t want to define your own. These can be used either as variables (with the ease- prefix), or in token maps (with the _ prefix)

Since 4.0.0:

  • NEW: Now available as individual variables

Example

scss 
@use 'animate/easing-named' as named;
@each $name, $value in meta.module-variables('named') {
  /*! $#{$name}: #{$value}; */
}
css compiled 
/*! $in: ease-in; */
/*! $out: ease-out; */
/*! $in-out: ease-in-out; */
/*! $in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); */
/*! $in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); */
/*! $in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); */
/*! $in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); */
/*! $in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); */
/*! $in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); */
/*! $in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); */
/*! $in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); */
/*! $out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); */
/*! $out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); */
/*! $out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); */
/*! $out-quint: cubic-bezier(0.23, 1, 0.32, 1); */
/*! $out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); */
/*! $out-expo: cubic-bezier(0.19, 1, 0.22, 1); */
/*! $out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); */
/*! $out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); */
/*! $in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
/*! $in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); */
/*! $in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); */
/*! $in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); */
/*! $in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); */
/*! $in-out-expo: cubic-bezier(1, 0, 0, 1); */
/*! $in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); */
/*! $in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); */

Used By

@function ease()

@mixin easing--()

@mixin ease--()

@function var-ease()

Easing Maps: Curves & Steps

Whether you are using CSS-named easing, like ease-in-out and linear, or defining your own easing with cubic-bezier() and steps()/frames() – we’ll help you organize and standardize your values in a single location. We also provide a classic set of built-in easing functions, which you can rename, access, or override as desired.

$easing

scss 
$easing: () !default;

A variable storing the map of all easing globally-available on your project. Any easing added to the $easing map will be accessible to the ease() function by default.

Define each easing with a name and value…

$easing: (
  'elastic': cubic-bezier(0.5, -0.4, 0.5, 1.4),
  'sidebar-in': ease-out,
  'sidebar-out': '#_in-back',
  'modal-in': '#sidebar-in',
);
  • Name your easing anything – from abstractions like elastic, to concrete patterns like sidebar-in.
  • Values can be CSS-ready easing functions, or references other easings in the map.

Used By

@mixin add-easing()

@function ease()

Access a named easing function in your $easing 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: 'ease' (string)

The name of an easing in your configuration

$do: null (map | null)

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

$source: $easing (map)

Optional Accoutrement-format map of easings to use as the origin palette (in additional to the provided defaults)

@return (length)

The pre-defined easing

Requires

@function get() [private]

$named-easing

@mixin add-easing()

Merge individual easing maps into the global $easing variable, in case you want to define easings in smaller groups such as fade-easing, slide-easing, etc before merging them into a single global easing-palette.

Parameters & Output

$maps: (map...)

Pass any number of maps to be merged.

{CSS output} (code block)

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

Requires

@function multi-merge()

$easing

@function compile-easing()

Compile all the tokens in an easing 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 easing token maps

Parameters & Return

$map: $easing (map)

The map to be compiled

$source: $easing (map | null)

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

@return (map)

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

Requires

@function map-compile-with()