Javascript/CSS animation and transition utility.
MIT License
Javascript animation and transition utility. Uses CSS under the hood. Useful for React performant animations.
from
or to
npm i --save moveit
npm start
then visit http://127.0.0.1:3000
import { transition, animation } from 'moveit';
transition(node, definition, override?, callback?);
definition
is an object with keyframes
and standard CSS properties for
animation / transition. keyframes
takes percentages (or from
and to
) as
keys and CSS maps as values.
Possible properties :
delay
duration
ease
Animation only :
iterationCount
direction
fillMode
You can pass a string corresponding to one of these easings, or use a custom function using CSS cubic-bezier()
syntax.
import { transition } from 'moveit';
const definition = {
keyframes: {
from: {
opacity: '0'
},
to: {
opacity: '1'
}
},
ease: 'ease-in',
duration: '1s'
};
transition(node, definition);
API is the same, but with animation you can add intermediate keyframes.
import { animation } from 'moveit';
const definition = {
keyframes: {
from: {
opacity: '0'
},
'50%': {
opacity: '.3'
}
to: {
opacity: '1'
}
},
ease: 'ease-in',
duration: '1s'
};
animation(node, definition);
transition(node, definition, () => console.log('done !'));
const override = {
ease: 'ease-out'
};
transition(node, definition, override);
// You could import this from an animations.js file, pass it through props...
const openMenu = props => {
return {
keyframes: {
to: {
transform: `translate3d(${props.left}px, 0, 0)`
}
},
ease: 'ease-out-cubic',
duration: '1s'
};
};
class Menu extends Component {
handleClick() {
transition(React.findDOMNode(this.refs.animated), openMenu({ left: this.props.menuWidth - window.innerWidth }));
}
render() {
return (
<div ref='animated'>
<button onClick={ ::this.handleClick }></button>
</div>
);
}
}