@kabbage/sprout 0.13.2

Motion Tokens

All animation properties in Sprout are ultimately derived from motion tokens.

$spr-tokens-motion (map)

scss 
$spr-tokens-motion: (
  duration: (
    xs: 0.07s,
    sm: 0.11s,
    md: 0.15s,
    lg: 0.24s,
    xl: 0.41s
  ),
  easing: (
    enter: ease-in,
    standard: ease-in-out,
    exit: ease-out
  )
) !default;

A map containing all motion tokens.

Map Properties

duration: (map)

Duration tokens control keyframe timing of transitions and animations.

easing: (map)

Easing tokens determine motion-curve of transitions and animations.

Configuration

@mixin spr-config-motion()

Configures Sprout motion tokens by recursively merging in the provided map.

Parameters

$custom-config: () (map)

Sprout motion token map that matches the form of $spr-tokens-motion

Requires

@function recursive-map-merge()

$spr-tokens-motion (map)

Used By

@mixin spr-config()

Getter Functions

@function spr-duration-tokens()

Get a map of all duration tokens.

Requires

$spr-tokens-motion (map)

Used By

@function spr-duration()

@function spr-easing-tokens()

Get a map of all easing tokens.

Requires

$spr-tokens-motion (map)

Used By

@function spr-easing()

@function spr-duration()

Get a duration value given a duration token.

Parameters

$duration-token: (string)

A Sprout duration token such as ‘sm’ or ‘lg’.

Requires

@function map-get-strict()

@function spr-duration-tokens()

Used By

@mixin spr-popover()

@mixin spr-animate()

@function spr-easing()

Get an easing value given an easing token.

Parameters

$easing-token: (string)

A Sprout easing token such as ‘enter’ or ‘exit’.

Requires

@function map-get-strict()

@function spr-easing-tokens()

Used By

@mixin spr-animate()