npm.io
0.0.2 • Published 5 years ago

memtive-interactive

Licence
MIT
Version
0.0.2
Deps
3
Size
17 kB
Vulns
1
Weekly
0

memtive-interactive

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

NPM JavaScript Style Guide

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