Chirp Sass Documentation

Animation

Installation

  yarn add @chewy/kib-foundations

Import

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

Variables

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

Description

Page top starting position

Type

Number

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

Description

Page fade transitions duration

Type

Number

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

Description

Page slide Group transitions duration

Type

Number

Mixins

@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
parameter Name	parameter Description	parameter Type	parameter Default value
`$delay`	delay preset	`Number`	`'0'`

Requires

[variable] delay

Used by

@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
parameter Name	parameter Description	parameter Type	parameter Default 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

[mixin] page-entry-common
[variable] delay

@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
parameter Name	parameter Description	parameter Type	parameter Default value
`$delay`	delay preset	`Number`	`'0'`
`$duration`	duration preset	`Number`	`'settings.$fade-transition-duration'`

Requires

[mixin] page-entry-common
[variable] delay
[variable] duration

@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
parameter Name	parameter Description	parameter Type	parameter Default value
`$delay`	delay preset	`Number`	`'0'`
`$duration`	duration preset	`Number`	`'settings.$slide-transition-duration'`

Requires

[mixin] page-entry-common
[variable] delay
[variable] duration