```js import Animation from '@invisionag/iris-react-animation'; ```
npm install @invisionag/iris-react-animation``js`
import Animation from '@invisionag/iris-react-animation';
A component that parses standardized Adobe After Effects animation data.
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).
`js
import Animation from '@invisionag/iris-react-animation';
import animationData from './animation.json';
`
#### 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:
`js
import Animation, { AnimationDelayer } from '@invisionag/iris-react-animation';
import animationData from './animation.json';
`
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
`js
import Animation from '@invisionag/iris-react-animation';
import animationData from './animation.json';
{({ onRef }) => (
)}
`
#### lottieOptions (optional)
This lets you pass options directly to lottie.
Should be used as an escape hatch if all else fails.
`js
import Animation from '@invisionag/iris-react-animation';
import animationData from './animation.json';
``