2.9.2

Animate

Animations for Bolt Design System

Published

History
View changes
Install
yarn add @bolt/components-animate
Source code
View on Github
Dependencies

The Bolt Animate Component

  <bolt-animate in="fade-in"> ...</bolt-animate>

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
InitialAppearance string hidden
  • default, hidden
In string none
  • none, fade-in, slide-down, fade-in-slide-up, fade-in-slide-down, fade-in-slide-left, fade-in-slide-right, fade-in-fade-out
InDuration

Set in milliseconds

number 500
InDelay

Set in milliseconds

number 0
InEasing string ease
  • ease, ease-in, ease-out, ease-in-out, linear
InOrder number 1
Idle string none
  • none, pulse, spin, heart-beat
IdleDuration

Set in milliseconds

number 500
IdleDelay

Set in milliseconds

number 0
Out string none
  • none, fade-out, fade-out-slide-up, slide-up, fade-out-slide-down, fade-out-slide-left, fade-out-slide-right
OutDuration

Set in milliseconds

number 350
OutDelay

Set in milliseconds

number 0
OutEasing string ease
  • ease, ease-in, ease-out, ease-in-out, linear
OutOrder number 1
ShowMeta boolean false

Slots

Name Required? Description
default No wrapped content to animate

Methods

Name Description
triggerAnimIn() => boolean start the in animation, will go to idle animation after
triggerAnimOut() => boolean start the out animation

Events

Name Detail Description
bolt-animate:end:in {} Indicates when the in animation concluded
bolt-animate:end:out {} Indicates when the out animation concluded

In, Idle, Out

In

Idle, Out

Out

In, Out

In, Idle

Idle

Build Ins

in="none"

none


in="fade-in"

fade-in


in="slide-down"

slide-down


in="fade-in-slide-up"

fade-in-slide-up


in="fade-in-slide-down"

fade-in-slide-down


in="fade-in-slide-left"

fade-in-slide-left


in="fade-in-slide-right"

fade-in-slide-right


in="fade-in-fade-out"

fade-in-fade-out


Build Outs

out="none"

none


out="fade-out"

fade-out


out="fade-out-slide-up"

fade-out-slide-up


out="slide-up"

slide-up


out="fade-out-slide-down"

fade-out-slide-down


out="fade-out-slide-left"

fade-out-slide-left


out="fade-out-slide-right"

fade-out-slide-right