Bolt Design System

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

npm install @bolt/components-animate

Dependencies

@bolt/core-v3.x

@bolt/lazy-queue

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

Animate