Accoutrement 2.1.1

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()

$_a_EASING

scss
$_a_EASING: (
  '_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),
);

A classic set of built-in easing functions, if you don’t want to define your own. Don’t edit this map directly, but feel free to reference these values from the user-defined $easing map.

Used By

@function ease()

@mixin easing--()

@mixin ease--()

@function var-ease()

@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-token()

@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 _a_map-multimerge() [private]