react-smooth-umd v0.0.4

react-smooth

react-smooth is a animation library work on React.

install

npm install --save react-smooth

Usage

ordinary animation

<Animate to="0" attributeName="opacity">
  <div />
</Animate>

steps animation

const steps = [{
  style: {
    opacity: 0,
  },
  moment: 400,
}, {
  style: {
    opacity: 1,
    transform: 'translate(0, 0)',
  },
  moment: 1000,
}, {
  style: {
    transform: 'translate(100px, 100px)',
  },
  moment: 1200,
}];

<Animate steps={steps}>
  <div />
</Animate>

children can be a function

<Animate from={{ opacity: 0 }}
  to={{ opacity: 1 }}
  easing="ease-in"
  >
  {
    ({ opacity }) => <div style={{ opacity }}></div>
  }
</Animate>

you can configure js timing function

const easing = configureBezier(0.1, 0.1, 0.5, 0.8);
const easing = configureSpring({ stiff: 170, damping: 20 });

group animation

const appear = {
  from: 0,
  to: 1,
  attributeName: 'opacity',
};

const leave = {
  steps: [{
    moment: 0,
    style: {
      transform: 'translateX(0)',
    },
  }, {
    moment: 1000,
    style: {
      transform: 'translateX(300)',
      height: 50,
    },
  }, {
    moment: 2000,
    style: {
      height: 0,
    },
  }]
}

<AnimateGroup appear={appear} leave={leave}>
  { list }
</AnimateGroup>

API

Animate

AnimateGroup

License

MIT

Copyright (c) 2015-2016 Recharts Group