_series.scss

$-mui-queue: ();

/// Creates a new animation queue.
/// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue.
@mixin mui-series($delay: 0s) {
  $-mui-queue: () !global;

  @if $delay > 0 {
    $item: ($delay, 0s);
    $-mui-queue: append($-mui-queue, $item) !global;
  }

  @content;
}

/// Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`.
/// @param {Duration} $duration [1s] - Length of the animation.
/// @param {Duration} $gap [0s] - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one.
/// @param {Function} $keyframes... - One or more effect functions to build the keyframe with.
@mixin mui-queue(
  $duration: 1s,
  $gap: 0s,
  $keyframes...
) {
  // Build the animation
  $kf: -mui-process-args($keyframes...);

  // Calculate the delay for this animation based on how long the previous ones take
  $actual-delay: 0s;
  @each $anim in $-mui-queue {
    $actual-delay: $actual-delay + nth($anim, 1) + nth($anim, 2);
  }

  // Append this animation's length and gap to the end of the queue
  $item: ($duration, $gap);
  $-mui-queue: append($-mui-queue, $item) !global;

  // --- CSS output ---
  // Initial properties
  @include -mui-keyframe-get($kf, 0);
  animation-fill-mode: both;

  // Start the animation
  .#{map-get($motion-ui-settings, activate-queue-class)} & {
    @include mui-animation($kf);
    animation-delay: $actual-delay;
    animation-duration: $duration;
  }

  // Pause the animation
  // This was the behavior before v1.3.0. See https://git.io/motion-ui-97
  .#{map-get($motion-ui-settings, pause-queue-class)} & {
    animation-play-state: paused;
  }
}