@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 * as animationData from './animation.json';

<Animation data={animationData} />

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 * as 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 * as animationData from './animation.json';

<Animation data={animationData} lottieOptions={{ loop: false }} />