animate docs

Animate

Animations for Bolt Design System

Published Last updated: 2.25.1 Change log Github NPM
Twig Usage
  <bolt-animate in="fade-in"> ...</bolt-animate>
Schema
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
Install Install
  npm install @bolt/components-animate
Dependencies @bolt/core-v3.x @bolt/lazy-queue

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

animate

In, Idle, Out

In

Idle, Out

Out

In, Out

In, Idle

Idle

animate build stages

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