2.24.0

Animate

Animations for Bolt Design System

The Bolt Animate Component

Overview Usage Schema Edit this page
  <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 or 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
Debug Panel