@invisionag/iris-react-animation

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 }} />