Package Exports
- @infinityfx/lively
- @infinityfx/lively/animate
- @infinityfx/lively/animations
- @infinityfx/lively/hooks
Readme
Lively
Lightweight, zero-configuration react animation library.
Table of contents
Get started
Installation
$ npm i @infinityfx/livelyUsage
import { Animate } from '@infinityfx/lively/animate';
...
<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>Base 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>Morph <Morph />
Morphs one element into another.
import { Morph } from '@infinityfx/lively';
...
<Morph active={state}>
<div onClick={() => setState(!state)}>
...
</div>
</Morph>
<Morph active={!state}>
<div onClick={() => setState(!state)}>
...
</div>
</Morph>Auto-animation
Animate <Animate />
Automatic animation based on pre-fab animations.
WriteOn <WriteOn />
import { WriteOn } from '@infinityfx/lively/animate';
...
<WriteOn>Lorem ipsum dolor sit amet</WriteOn>ColorWipe <ColorWipe />
import { ColorWipe } from '@infinityfx/lively/animate';
...
<ColorWipe>
<div class="my-class">...</div>
</ColorWipe>Animations
Overview
Lively exports a submodule called animations which contains various pre-fab animations that can be used in tandem with the <Animate /> component. These animations can be used as is, or can be configured with extra options by calling the respective animation as a function which takes as an argument the options object.
import { Move } from '@infinityfx/lively/animations';
// configure the animation
Move({ direction: 'down' }); // default = 'up'These pre-fab can be used as followed with either an <Animate /> or <Animatable /> component:
import { Move } from '@infinityfx/lively/animations';
import { Animate } from '@infinityfx/lively/animate';
...
<Animate animations={[Move, Move({ ... })]}>...</Animate>import { Move } from '@infinityfx/lively/animations';
import { Animatable } from '@infinityfx/lively';
...
<Animatable animations={{
myAnimationName: Move,
myOtherAnimation: Move({ ... })
}}>...</Animatable>
// or
<Animatable animate={Move}>...</Animatable>Create your own
If you whish to create your own pre-fab animation, you can do so by creating a function with the static method use attached to it. Furthmore adding support for extra configuration options, leads to the following structure:
import { Animation } from '@infinityfx/lively';
export default function myAnimation(options = {}) {
myAnimation.use = myAnimation.use.bind(myAnimation, options);
return myAnimation;
}
myAnimation.use = (options = {}) => {
// do whatever you want here
// A new Animation takes two arguments, an object with values/keyframes to animate to and an object of initial values.
return new Animation({ ... }, { ... });
}Hooks
useUnmount
The useUnmount hook can be used to animate components that are being unmounted.