Home
Docs
InfinityFX
©Copyright2016-2025 InfinityFX. All rights reserved.
InfinityFX®
Lively
v4.0.10
Getting started
Components
Animatable
Animate
LayoutGroup
Morph
Typable
Hooks
useAudio
useLink
usePath
useReducedMotion
useScroll
useSpring
useTrigger
useViewport
useVisible

Getting started

Installing

1 
npm install @infinityfx/lively

Importing

Lively exports 2 components from @infinityfx/lively, the Animatable and Animate components.

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

In addition Lively also exports from 2 submodules; @infinityfx/lively/layout and @infinityfx/lively/hooks. These submodules can be used in tandem with the main module and provide extra utilities to help create more complex animations.

1 
import { Typable, Morph, LayoutGroup } from '@infinityfx/lively/layout';

It is important to note that the Animate, Typable and Morph components all build upon the Animatable component, extending its functionality. This means that these components also inherit the properties and functionality of the Animatable component.

Usage

Play a simple fading animation when the component mounts.