daniloster / react-animate-me

React Animate Me

Basic package to build reusable animations.

Docs

• react-animate-me
• react-animate-me/API

Current core dependencies versions

• node &<= 6.14.0
• npm &<= 3.10.10
• yarn (version may be check at package.json)

Peer dependencies

"styled-components": "^4.1.3",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"uuid": "^3.3.2"

Getting started

To start building your own animations, it is only required to consume the Animate component from this package.

Find below an example of how to build a FadeEffect and how to use it.

FadeEffect.js

import { createCustomAnimation }from 'react-animate-me';

/**
 * Here is an example of keyframes where the state represents
 * the progress which can be set as [0-100]% or as keywords
 * (from, to), and the content is the styles applied to the
 * keyframe.
 * */
const FADE_PROGRESS = [
  {
    state: '0%',
    content: 'position: relative; opacity: 0;',
  },
  {
    state: '100%',
    content: 'opacity: 1;',
  },
];

function parseFadeEffect(props) {
  return {
    ...props,
    animationName: 'fadeIn',
    duration: 1,
  };
}

const FadeEffect = createCustomAnimation(parseFadeEffect, FADE_PROGRESS);

export default FadeEffect;

FadeEffect.defaultProps = {
  delay: 0,
  maxAnimations: 1,
};

App.js

import React from 'react';
import { render } from 'react-dom';
import FadeEffect from './FadeEffect';

// app
const div = document.createElement('div');

div.id = 'container';
div.style.backgroundColor = 'inherit';
div.style.width = '100vw';
div.style.height = '100vh';
document.body.style.margin = 0;

document.body.appendChild(div);


function SimpleContent(props) {
  const { title, children } = props;
  return (
    <div>
      <h1>{title}</h1>
      <p>{children}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <FadeEffect delay={0.3}>
        <SimpleContent title="Good morning">
          That is really good day
        </SimpleContent>
      </FadeEffect>
      <FadeEffect delay={0.6}>
        <SimpleContent title="Amazing evening">
          That is really an amazing evening
        </SimpleContent>
      </FadeEffect>
    </div>
  )
}

render(<App />, div);

Contributions rules

• Changes must be approved;
• Changes must have tests passing on Travis-CI;
• Changes must have coverage of 95% on Travis-CI for: statements, branches, functions and lines;
• Last commit message must have attribute [release=major|minor|patch|no-release];