Overview

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` 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`	—

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

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