carbon-components/scss/globals/scss/_motion.scss

//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import './vendor/@carbon/elements/scss/motion/motion';

/// Used primarily for removing elements from the screen.
/// @access public
$carbon--ease-in: cubic-bezier(0.25, 0, 1, 1);

/// Used for adding elements to the screen or changing on-screen states at a users's input.
/// @access public
$carbon--ease-out: cubic-bezier(0, 0, 0.25, 1);

/// Used for the majority of animations.
/// @access public
$carbon--standard-easing: cubic-bezier(0.5, 0, 0.1, 1);

/// Base transition duration
/// @access public
$transition--base: 250ms;

/// Expansion duration
/// @access public
$transition--expansion: 300ms;

/// New easing durations
$duration--fast-01: 70ms;
$duration--fast-02: 110ms;
$duration--moderate-01: 150ms;
$duration--moderate-02: 240ms;
$duration--slow-01: 400ms;
$duration--slow-02: 720ms;

// ☠️ Deprecated

/// Default ease-in for components
/// @access public
/// @deprecated Updated to `$carbon--ease-in`
$bx--ease-in: $carbon--ease-in;

/// Default ease-out for components
/// @access public
/// @deprecated Updated to `$carbon--ease-out`
$bx--ease-out: $carbon--ease-out;

/// Standard easing for components
/// @access public
/// @deprecated Updated to `$carbon--standard-easing`
$bx--standard-easing: $carbon--standard-easing;

@if feature-flag-enabled('components-x') {
  $carbon--ease-in: cubic-bezier(0, 0, 0.38, 0.9);
  $carbon--ease-out: cubic-bezier(0.2, 0, 1, 0.9);
  $carbon--standard-easing: cubic-bezier(0.2, 0, 0.38, 0.9);

  $transition--base: $duration--fast-02;
  $transition--expansion: $duration--moderate-02;
}

/// Get the transition-timing-function for a given easing and motion mode.
/// Easings that are currently supported include: standard, entrance, and exit.
/// We also offer two modes: productive and expressive.
/// @access public
/// @param {String} $name - the name of the easing curve to apply
/// @param {String} $mode - the mode for the easing curve to use
/// @return {cubic-bezier}
@function motion($name, $mode: productive, $easings: $carbon--easings) {
  @return carbon--motion($name, $mode, $easings);
}

/// Get the transition-timing-function for a given easing and motion mode.
/// Easings that are currently supported include: standard, entrance, and exit.
/// We also offer two modes: productive and expressive.
/// @access public
/// @param {String} $name - the name of the easing curve to apply
/// @param {String} $mode - the mode for the easing curve to use
/// @return {cubic-bezier}
@mixin motion($name, $mode) {
  @include carbon--motion($name, $mode);
}