@invisionag/iris-react-animation
v2.5.2
Published
```js import Animation from '@invisionag/iris-react-animation'; ```
Downloads
145
Maintainers
Keywords
Readme
import Animation from '@invisionag/iris-react-animation';
A component that parses standardized Adobe After Effects animation data.
Usage:
All additional props will be passed to it's container, which is react-image-container
by default.
Default
Takes a javascript object representing an Adobe After Effects animation (E.g. from a JSON file).
import Animation from '@invisionag/iris-react-animation';
import animationData from './animation.json';
<Animation data={animationData} />
AnimationDelayer
Sometimes it may be necessary to delay the start of an animation. For this purpose, the animation package ships with an AnimationDelay
component that stops any css or lottie animation in its children. Note that it will stop any animations, not just direct children. The default delay is 1000ms but can be configured by passing a delay
prop.
Example:
import Animation, { AnimationDelayer } from '@invisionag/iris-react-animation';
import animationData from './animation.json';
<AnimationDelayer delay={1000}>
<Animation data={animationData} />
</AnimationDelayer>
Note: The AnimationDelayer will only delay animations on mounting. It will not delay on updates
Custom container
Use the children render prop to render the svg in a custom container.
Render prop params:
- onRef: callback that will be invoked when the ref is set. Expects a domNode as first element, which will then be used as the node the animation is rendered in.
- animation: the lottie animation instance. See https://github.com/airbnb/lottie-web#usage.
- all additional props passed to
Animation
import Animation from '@invisionag/iris-react-animation';
import animationData from './animation.json';
<Animation data={animationData}>
{({ onRef }) => (
<div ref={onRef} />
)}
</Animation>
lottieOptions (optional)
This lets you pass options directly to lottie. Should be used as an escape hatch if all else fails.
import Animation from '@invisionag/iris-react-animation';
import animationData from './animation.json';
<Animation data={animationData} lottieOptions={{ loop: false }} />