JM's react-animejs
A React animation library for creating amazing React App.Live demo
Getting Started
Prerequisites
React 16.8 and above
Installing
On your React project directory runnpm i react-animejs
or
yarn add react-animejs
Usage
- Import ReactAnime
import ReactAnime from 'react-animejs'
const {Anime, stagger} = ReactAnime
- Basic Usage
<Anime
initial={[
{
targets: "#Box",
translateX: 50,
easing: "linear"
}
]}
>
<div id="Box" style={{ height: 50, width: 50, background: "#d3d" }} />
</Anime>
- Working with Keyframe
<Anime
initial={[
{
targets: "#Box",
keyframes: [
{
translateX: 50
},
{
translateY: 50
},
{
translateX: 0
},
{
translateY: 0
}
],
// easing:'spring',
duration: 3500,
loop: true
}
]}
>
<Box />
</Anime>
- Working with timeline
<Anime
initial={[
{ //1st segment
targets: ".tl_square",
translateX: 250
},
{ //2nd
targets: ".tl_circle",
translateX: 250
},
{ //3rd
targets: ".tl_triangle",
translateX: 250
}
]}
>
- With Controller Scrubber
important: use
setMeta
to <Anime>
compontent like <Anime setMeta={setMea} ...
const ControlledDemo = () => {
const [control, setControl] = useState(null); //controller state
const [meta, setMeta] = useState({
//meta state of the player
control: control,
progress: 0,
currentTime: 0,
duration: 0
});
return (
<div>
<Anime
control={control}
setMeta={setMeta} // important to pull state of the player
animeConfig={{
autoplay: false,
duration: 1500,
easing: "easeInOutSine"
}}
initial={[
{
targets: ".tl_square",
translateX: 250
},
{
targets: ".tl_circle",
translateX: 250
},
{
targets: ".tl_triangle",
translateX: 250
}
]}
>
<div
className="tl_square"
style={{ height: 50, width: 50, background: "#d3f454" }}
/>
<div
className="tl_circle"
style={{
height: 50,
width: 50,
background: "#d3f454",
borderRadius: "50%"
}}
/>
<div
className="tl_triangle"
style={{
height: 50,
width: 50,
background: "#d3f454",
clipPath: "polygon(50% 0, 0 100%, 100% 100%)"
}}
/>
</Anime>
<div
className="button"
onClick={() => {
setControl("play");
}}
>
Play
</div>
<div
className="button"
onClick={() => {
setControl("pause");
}}
>
Pause
</div>
<div
className="button"
onClick={() => {
setControl("restart");
}}
>
Restart
</div>
<input
type="range"
min="1"
max="100"
value={meta.progress || 0}
className="slider"
id="myRange"
onChange={e => console.log(setControl(["seek", e.currentTarget.value]))}
/>
</div>
);
};
- Events
_
in front of event like _onClick
to call anime on click event<Anime
style={{ width: 100 }}
_onMouseEnter={[
{
targets: "#Box",
backgroundColor: `rgba(255,0,22,0.5)`,
easing: "linear"
}
]}
_onMouseLeave={[
{
targets: "#Box",
backgroundColor: "#d3d",
easing: "linear"
}
]}
>
<Box />
</Anime>
- Component type
<div>
but you can declare the type for the component like button
<Anime
type="button" // <------ Like this
id="self"
onClick={() => {
console.log("clicked");
}}
style={{ position: "absolute", width: 50, height: 80, background: "#d5d5d5" }}
initial={[
{
targets: "#self",
height: "150px",
width: "150px",
translateX: 100,
translateY: 300,
easing: "spring"
}
]}
_onClick={[
{
targets: "#self",
scale: 0.5,
easing: "easeInOutSine",
duration: 2000
}
]}
_onMouseEnter={[
{
targets: "#self",
background: "#d3d",
easing: "easeInOutSine",
direction: "alternate",
duration: 2000
}
]}
_onMouseLeave={[
{
targets: "#self",
background: "#d5d5d5",
easing: "easeInOutSine",
duration: 2000
}
]}
>
Default Button
</Anime>
Properties
| Property | Description | Type | Optional | | -------------- | ----------------------------------------------------------------- | ---------------------------------- | -------- | | setMeta | use this to pull in progress of the Anime Component | object | true | | iniital | animation that will run on the initial rendering of the component | object | true | | \_onUpdate | animation that will run on every update of a component | object | true | | \_onUnmount | animation that will run on every unmount event of a component | object | true | | animeConfig | configuration of the Anime of component | object | true | | explode | chop the string into words or characters | string'characters'
or 'words'
| |
| explodeOptions | options for the exloded elements | object {{name:'atomic'}}
| |Currently supported events
| | | | | | | ------------- | --------------- | --------------- | -------------- | ------------- | | \_onClick | \_onContextMenu | \_onDoubleClick | \_onDrag | \_onDragEnd | | \_onDragEnter | \_onDragExit | \_onDragLeave | \_onDragOver | \_onDragStart | | \_onDrop | \_onMouseDown | \_onMouseEnter | \_onMouseLeave | \_onMouseMove | | \_onMouseOut | \_onMouseOver | \_onMouseUp |Contributing
- star this repo
- contribute to the code just
fork
and issue apull request
- share to fellow devs
Authors
- JM Disuanco - React-AnimeJS component - JM Disuanco
License
This project is licensed under the MIT License - see the LICENSE.md file for detailsAcknowledgments
- Julian Garnier for his amazing AnimeJS library