• No results

Animation

Installation

  yarn add @chewy/kib-foundations

Import

  @use '~@chewy/kib-foundations/src/animation';

Functions

get-properties

@function get-properties() { ... }@function get-properties() { 
  $result: ();

  @each $key, $value in settings.$animations {
    $result: map.set($result, 'animation', $key, $value);
  }

  @return common.flatten-map($result);
 }
Description

Returns animation tokens as a flattened map with 'animation-' prefixed keys. Used by the custom-properties mixin to generate CSS custom properties.

Parameters

None.

Returns
Map —

Final flattened map

Requires
Used by

-get-animation-value

@function -get-animation-value($path...) { ... }@function -get-animation-value($path...) { 
  $has-key: map.has-key(settings.$animations, $path...);

  @if not $has-key {
    @error "Animation value (#{$path}) not found.";
  }

  @return map.get(settings.$animations, $path...);
 }
Description

Retrieves an animation value from the token map.

Parameters
Parameters
NameDescriptionTypeDefault value
$path...

Path to the animation value

List—
Returns
Number or String —

Animation value from the token map

Throws

  • Animation value (#{$path}) not found.

Requires
Used by

-get-animation-property

@function -get-animation-property($path) { ... }@function -get-animation-property($path) { 
  @if not map.has-key(settings.$animations, $path...) {
    @error "The animation property (#{$path}) does not exist.";
  }

  $property: common.get-property-name('animation', $path...);
  $fallback: -get-animation-value($path...);

  @return string.unquote('var(#{$property}, #{$fallback})');
 }
Description

Get a single animation style property definition.

Parameters
Parameters
NameDescriptionTypeDefault value
$path

The map path to the desired property definition.

List—
Returns
List or String or Number —

Return the value of the animation property.

Throws

  • The animation property (#{$path}) does not exist.

Requires

get

@function get($path...) { ... }@function get($path...) { 
  @return get-property($path...);
 }
Description

Creates a custom property reference from an animation path

Parameters
Parameters
NameDescriptionTypeDefault value
$path...

Comma separated path to an animation property

List—
Returns
String —

CSS var() function with a fallback value

Used by

Variables

preferred-theme

Deprecated!

Single theme per SCSS file.

$preferred-theme: common.$preferred-theme !default;
Description

Name of the preferred theme to look for properties first. If not found it will fallback to common.$default-theme.

Type

String

Used by

page-entry-movement

$page-entry-movement: unit.rem(170px);
Description

Page top starting position

Type

Number

page-fade-transition-duration

$page-fade-transition-duration: 1000ms !default;
Description

Page fade transitions duration

Type

Number

page-slide-transition-duration

$page-slide-transition-duration: 500ms !default;
Description

Page slide Group transitions duration

Type

Number

animation-press-scale-amount-initial

$animation-press-scale-amount-initial: 1 !default;
Description

Initial scale3d value before applying transitions

Type

Number

Used by

animations

$animations: (...);$animations: map.get(tokens.$chirp-theme, 'animation');
Description

Animation tokens map from the base theme. The new $chirp-theme has animation tokens under the 'animation' key directly.

Type

Map

Used by

aliases

$aliases: (...);$aliases: ();
Description

Map of animation style aliases to facilitate deprecation and removal of animation styles Currently a placeholder.

Type

Map

Used by

deprecated-property-names

$deprecated-property-names: (...);$deprecated-property-names: ();
Description

Deprecated color paths

Type

Map

Used by

Mixins

custom-properties

Deprecated!

Use prebuilt CSS theme files from @chewy/chirp-design-tokens instead.

Generates CSS Custom Properties for animation tokens. Prefer importing theme files directly:

```css

@mixin custom-properties($overrides: null) { ... }@mixin custom-properties($overrides: null) { 
  @warn "animation.custom-properties() is deprecated. Import CSS theme files from @chewy/chirp-design-tokens/web/css (for example, theme-base-light.css and theme-base-dark.css).";

  $animation-properties: functions.get-properties();

  @if $overrides {
    $animation-properties: map.deep-merge($animation-properties, $overrides);
  }

  @each $key, $value in $animation-properties {
    #{common.get-property-name($key)}: $value;
  }
 }
Parameters
Parameters
NameDescriptionTypeDefault value
$overrides

Map that overrides matching custom property values.

Mapnull
Requires

apply

@mixin apply($animation-style...) { ... }@mixin apply($animation-style...) { 
  $variant: functions.get-last-item($animation-style);
  $animation-style: functions.remove-last-item($animation-style);
  $style: map.get(settings.$animations, $animation-style...);

  $not-rendered: true;
  @each $name in map.keys($style) {
    $is-variant-match: string.index($name, '-#{$variant}') != null;
    $is-subtle: string.index($name, '-subtle') != null;
    $is-standard: string.index($name, '-standard') != null;
    $value: map.get($style, $name);
    $valueType: '';

    @if $is-variant-match {
      @if $is-subtle {
        $valueType: common.str-replace($name, '-subtle', '');
      } @else if $is-standard {
        $valueType: common.str-replace($name, '-standard', '');
      } @else {
        $valueType: $name;
      }
    }

    @if $valueType == 'duration' or $valueType == 'function' {
      $fallback: #{map.get($style, $name)};
      $value: string.unquote('var(#{$value}, #{$fallback})');
      --animation-press-scale-#{$valueType}: #{$value};
    } @else if ($valueType == 'amount' or $valueType == 'amount-hover') and $is-variant-match {
      $property: common.get-property-name('animation', list.append($animation-style, $name));
      $fallback: #{map.get($style, $name)};
      $value: string.unquote('var(#{$property}, #{$fallback})');

      --animation-press-scale-#{$valueType}: #{$value};
    }
  }

  $animation-press-scale-amount-standard: 0;
  $animation-press-scale-amount-subtle: 0;
  $animation-press-scale-amount-standard-hover: 0;
  $animation-press-scale-amount-subtle-hover: 0;

  @each $name in map.keys($style) {
    $is-variant-match: string.index($name, '-#{$variant}') != null;
    $is-variant-match-string: 'false';
    @if string.index($name, '-#{$variant}') {
      $is-variant-match-string: 'true';
    }
    $is-subtle: string.index($name, '-subtle') != null;
    $is-standard: string.index($name, '-standard') != null;
    $value: map.get($style, $name);
    $valueType: '';

    @if $is-variant-match {
      @if $is-subtle {
        $valueType: common.str-replace($name, '-subtle', '');
      } @else if $is-standard {
        $valueType: common.str-replace($name, '-standard', '');
      } @else {
        $valueType: $name;
      }
    }

    @if ($is-subtle or $is-standard) {
      @if $is-variant-match {
        --animation-press-scale-#{$valueType}: #{map.get($style, $name)};
      }
    } @else {
      --animation-press-scale-#{$name}: #{map.get($style, $name)};
    }
  }

  // initial - important for iOS
  transform: scale3d(
    settings.$animation-press-scale-amount-initial,
    settings.$animation-press-scale-amount-initial,
    1
  );

  // duration
  transition: transform var(--animation-press-scale-duration, #{map.get($style, 'duration')})
    var(--animation-press-scale-function, #{map.get($style, 'function')});

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      transform: scale3d(
        var(--animation-press-scale-amount-hover),
        var(--animation-press-scale-amount-hover),
        1
      );
    }
  }

  // normal
  &:active {
    transform: scale3d(var(--animation-press-scale-amount), var(--animation-press-scale-amount), 1);
  }

  // reduced motion
  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  @each $name in map.keys($style) {
    $is-variant-match: string.index($name, '-#{$variant}') != null;
    $is-variant-match-string: 'false';
    @if string.index($name, '-#{$variant}') {
      $is-variant-match-string: 'true';
    }
    $is-subtle: string.index($name, '-subtle') != null;
    $is-standard: string.index($name, '-standard') != null;
    $value: map.get($style, $name);
    $valueType: '';
    $newNewName: string.quote(common.str-replace(string.quote($name), '-subtle', ''));

    @if $is-variant-match {
      @if $is-subtle {
        $valueType: common.str-replace($name, '-subtle', '');
      } @else if $is-standard {
        $valueType: common.str-replace($name, '-standard', '');
      } @else {
        $valueType: $name;
      }
    }
  }
 }
Description

Generate styles using custom properties from a defined animation style. The apply mixin reads animation token values from the Sass map and sets local --animation-press-scale-* custom properties inline.

Parameters
Parameters
NameDescriptionTypeDefault value
$animation-style...

The animation style path and variant

String—
Example

Apply styles for a animation style definition

@use '~@chewy/kib-foundations/src/animation';

.my-custom-class {
  @include animation.apply('press', 'scale', 'standard');
}
Requires
Used by

page-entry-common

@mixin page-entry-common($delay: '0') { ... }@mixin page-entry-common($delay: '0') { 
  animation-delay: $delay;
  animation-fill-mode: both;
 }
Description

Page entry shared attributes

Parameters
Parameters
NameDescriptionTypeDefault value
$delay

delay preset

Number'0'
Requires
Used by

page-entry-fade-up

@mixin page-entry-fade-up($delay: '0', $fade-duration: 'settings.$fade-transition-duration', $slide-duration: 'settings.$slide-transition-duration') { ... }@mixin page-entry-fade-up($delay: '0', $fade-duration: 'settings.$fade-transition-duration', $slide-duration: 'settings.$slide-transition-duration') { 
  @include page-entry-common($delay);

  animation-name: kib-animation-page-entry-fade-in, kib-animation-page-entry-slide-up;
  animation-duration: $fade-duration, $slide-duration;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
 }
Description

Page entry fade up transition

Parameters
Parameters
NameDescriptionTypeDefault value
$delay

delay preset

Number'0'
$fade-duration

fade duration preset

Number'settings.$fade-transition-duration'
$slide-duration

slide duration preset

Number'settings.$slide-transition-duration'
Requires

page-entry-fade-in

@mixin page-entry-fade-in($delay: '0', $duration: 'settings.$fade-transition-duration') { ... }@mixin page-entry-fade-in($delay: '0', $duration: 'settings.$fade-transition-duration') { 
  @include page-entry-common($delay);

  animation-name: kib-animation-page-entry-fade-in;
  animation-duration: $duration;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
 }
Description

Page entry fade in transition

Parameters
Parameters
NameDescriptionTypeDefault value
$delay

delay preset

Number'0'
$duration

duration preset

Number'settings.$fade-transition-duration'
Requires

page-entry-slide-up

@mixin page-entry-slide-up($delay: '0', $duration: 'settings.$slide-transition-duration') { ... }@mixin page-entry-slide-up($delay: '0', $duration: 'settings.$slide-transition-duration') { 
  @include page-entry-common($delay);

  animation-name: kib-animation-page-entry-slide-up;
  animation-duration: $duration;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
 }
Description

Page entry slide up transition

Parameters
Parameters
NameDescriptionTypeDefault value
$delay

delay preset

Number'0'
$duration

duration preset

Number'settings.$slide-transition-duration'
Requires