sass.md

Sass API

Mark	Description
✅	Public functions, mixins, placeholders, and variables
❌	Private items - not supported outside package's build
⚠️	Deprecated items - may not be available in future releases

• @carbon/motion
  • ✅carbon--easings [variable]
  • ✅carbon--motion [function]
  • ✅carbon--motion [mixin]

@carbon/motion

✅carbon--easings [variable]

Common component easings

Source code

$carbon--easings: (
  standard: (
    productive: cubic-bezier(0.2, 0, 0.38, 0.9),
    expressive: cubic-bezier(0.4, 0.14, 0.3, 1),
  ),
  entrance: (
    productive: cubic-bezier(0, 0, 0.38, 0.9),
    expressive: cubic-bezier(0, 0, 0.3, 1),
  ),
  exit: (
    productive: cubic-bezier(0.2, 0, 1, 0.9),
    expressive: cubic-bezier(0.4, 0.14, 1, 1),
  ),
);

• Group: @carbon/motion
• Type: Map

✅carbon--motion [function]

Get the transition-timing-function for a given easing and motion mode

Source code

@function carbon--motion($name, $mode: productive, $easings: $carbon--easings) {
  @if map-has-key($easings, $name) {
    $easing: map-get($easings, $name);
    @if map-has-key($easing, $mode) {
      @return map-get($easing, $mode);
    } @else {
      @error 'Unable to find a mode for the easing #{$easing} called: #{$mode}.';
    }
  } @else {
    @error 'Unable to find an easing named #{$name} in our supported easings.';
  }
}

• Parameters:

Name	Description	Type	Default value
$name	Can be standard, entrance, or exit	String	—
$mode	Can be productive or expressive	String	productive
$easings	Easings map	Map	$carbon--easings

• Group: @carbon/motion
• Returns: Function CSS cubic-bezier() function
• Used by:
  • carbon--motion [mixin]

✅carbon--motion [mixin]

Set the transition-timing-function for a given easing and motion mode

Source code

@mixin carbon--motion($name, $mode) {
  transition-timing-function: carbon--motion($name, $mode);
}

• Parameters:

Name	Description	Type	Default value
$name	The name of the easing curve to apply	String	—
$mode	The mode for the easing curve to use	String	—

• Group: @carbon/motion
• Requires:
  • carbon--motion [function]