Package Exports
- @infinityfx/lively
- @infinityfx/lively/animations
- @infinityfx/lively/hooks
- @infinityfx/lively/prebuild
Readme
Lively
Lightweight, zero-configuration react animation library.
Table of contents
Get started
Installation
$ npm i @infinityfx/livelyUsage
import { Animate } from '@infinityfx/lively';
...
<Animate onMount>
<div class="my-class">
Lorem ipsum enim amet consequat ut reprehenderit cupidatat et incididunt qui minim culpa. Dolor do laborum nulla pariatur tempor excepteur duis et ipsum. Eu commodo et esse exercitation laborum cupidatat incididunt elit reprehenderit id.
</div>
</Animate>Components
Animatable <Animatable />
Base animation component that allows for fully customizable animations.
import { Animatable } from '@infinityfx/lively';
...
<Animatable
onMount
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}>
<div>...</div>
</Animatable>Animate <Animate />
Automatic animation based on pre-fab animations.
Morph <Morph />
Morphs one element into another.
Build-in animations
<WriteOn />
import { WriteOn } from '@infinityfx/lively/prebuild';
...
<WriteOn>Lorem ipsum dolor sit amet</WriteOn><ColorWipe />
import { ColorWipe } from '@infinityfx/lively/prebuild';
...
<ColorWipe>
<div class="my-class">...</div>
</ColorWipe>