Motion Utilities

Utilities implement some of the higher-level requirements and guidelines prescribed by the Sprout Design System. These mixins and functions provide the tools needed to develop animations effectively in Sprout.

@mixin spr-animate()

Generate styles for easing in and out, such as the animation for the Sprout modal.

Parameters

$easing-token: (string)

An $easing-token for behavior, such as enter or exit.

$duration-token: (string)

A $duration-token for length of animation, such as sm or xl

Requires

@function spr-duration()

@function spr-easing()

Used By

@mixin spr-animate-fade()

Generate styles for color/opacity cross-fade animations of micro-interactions such as button hover.

Parameters

$properties...: (list)

A list of CSS properties that should be animated such as ‘background’, ‘border-color’.

Motion Utilities

@mixin spr-animate()

Parameters

$easing-token: (string)

$duration-token: (string)

Requires

@function spr-duration()

@function spr-easing()

Used By

@mixin spr-animate-fade()

@mixin spr-animate-fade()

Parameters

$properties...: (list)

Requires

@mixin spr-animate()

Used By

@mixin spr-link()