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.

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

export default function Page() {

    return <Animatable animate={{ opacity: [0, 1] }} triggers={[{ on: 'mount' }]}>
        <div style={{
            width: 100,
            height: 100,
            borderRadius: 4,
            backgroundColor: 'var(--clr-accent)'
        }} />
    </Animatable>;
}

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

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

Used to define named animations.

An array of animation properties that should be cached between changes. Cached properties will animate between layout change animations.
default = ['translate', 'scale', 'rotate', 'color', 'backgroundColor', 'borderRadius', 'opacity']

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

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

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

The initial animation state the component should have upon mounting.

Whether the component should inherit properties from a parent component.
default = false

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

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

Whether all animations should be paused or not.

The delay in seconds between children in a staggering animation.
default = 0.1

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

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.