react-smooth-umd
v0.0.4
Published
react animation library
Downloads
4
Readme
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
Copyright (c) 2015-2016 Recharts Group