Animatable

A versatile component allowing for full control of your animations. The Animatable component allows you to define your own animations, use predefined animation Clips or bind reactive Links.

Importing

1 
import { Animatable } from '@infinityfx/lively';

Usage

Properties

adaptive?:boolean = false

When set to true will animate the component between layout changes, if it is a direct child of a LayoutGroup component.

animate?:Clip | ClipProperties

Used to define the default animation that is played on triggers that have no explicit name specified.

animations?:{ [name: string]: Clip | ClipProperties }

Used to define named animations.

cachable?:AnimatableKey[] = ['x', 'y , 'sx', 'sy', 'rotate', 'color', 'backgroundColor', 'borderRadius']

An array of animation properties that should be cached between changes. Cached properties will animate between layout change animations.

deform?:boolean = true

When set to false the component will correct deformations caused by scale based animations.

disabled?:boolean = false

When a component is disabled no animation will be played and any current animations will be cancelled.

id?:string

A unique identifier used to detect unmounting, should be unique for the whole page.

initial?:AnimatableInitials

The initial animation state the component should have upon mounting.

inherit?:boolean = false

Whether the component should inherit properties from a parent component.

manual?:boolean = false

When set to true, mount and unmount animations won't be triggered automatically.

order?:number = 1

Used when orchestrating cascade animations to define in what order child components should play their animation.

passthrough?:boolean = false

When true, the component will not participate in the cascading of animations and/or properties. Any child Animatable's that have inherit set will inherit from the next closest parent instead, if it exists.

paused?:boolean = false

Whether all animations should be paused or not.

stagger?:number = 0.1

The delay in seconds between children in a staggering animation.

staggerLimit?:number = 10

The number of children that will stagger one after the other, before animating all remaining children all at once.

triggers?:{ on: Trigger | boolean | 'mount' | 'unmount'; name?: string; ...options?: PlayOptions }[] = false

An array of triggers that define when certain animations should be played. When no name attribute is specified it will trigger the default animation defined inside the animate property.

The on attribute defines when an animation should be played and can be one of the following:
• A Trigger.
• A boolean, in which case it will trigger when the boolean changes from false to true.
• The value 'mount' or 'unmount' which will trigger when the component mounts or unmounts respectively.