memtive-interactive

A Component Library for interactive animations created in After Effects, Uses BodyMovin, Lottie and GASP for the rendering engine

Example

Here's an example of the library

Install

npm install --save memtive-interactive

Usage

ScrollAnimation

The ScrollAnimation component loads JSON keyframe animations, a scroll event controls the playback of the animation

import React, { Component } from 'react'

import { ScrollAnimation } from 'memtive-interactive'
import animation from './animation.json'

class Example extends Component {
  render() {
    return (
      <ScrollAnimation
        data={animation}
        scrollArea={5000} />
    );
  }
}

export default Example;

Props

| Props | Type | Default Value | Description | | --- | --- | --- | --- | | data [required] | JSON | <none> | Json exported from the BodyMovin plugin from After Effects | | scroll [optional] | Integer | 1000 | The scroll distance for the animation playback in pixels |

License

MIT © abhishekpratapa