0.0.2 • Published 3 years ago

memtive-interactive v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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
PropsTypeDefault ValueDescription
data requiredJSON<none>Json exported from the BodyMovin plugin from After Effects
scroll optionalInteger1000The scroll distance for the animation playback in pixels

License

MIT © abhishekpratapa