Numbers Probably Matter

    memtive-interactive

    0.0.2 • Public • Published

    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

    Keywords

    none

    Install

    npm i memtive-interactive

    DownloadsWeekly Downloads

    3

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    17.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • abhishekpratapa