React Anime.js Wrapper
Allows the use of Anime.js with React JSX elements to quickly and easily create powerful animations.
Check out the website to see more examples: reactanimejswrapper.com
Features:
-
Can nest
<Anime>< /Anime>
components within one another to make complex nested animations. -
The ability to easily copy everything in the
anime()
constructor examples from the Anime.js documentation into the config of the<Anime config={}></Anime>
components. -
No need to specify the 'targets' field in
config={}
as the targets will be automatically created internally for the child elements of<Anime></Anime>
. You can override and specify your own targets if needed. -
The ability to use the Anime.js controls with a ref
const myRef = useRef(null)
attached to the<Anime ref={myRef}></Anime>
component, to control that animation with the following:
myRef.current.play()
myRef.current.pause()
myRef.current.restart()
myRef.current.reverse()
myRef.current.seek(miliseconds)
myRef.current.seekPercent(percentage)
Installation
Using npm:
npm i react-animejs-wrapper
Using yarn:
yarn add react-animejs-wrapper
Easy to Use Examples
Some extra examples are present on the website with more to be added soon!
Translate elements, like with the text in an input.
import React from 'react'
import Anime from 'react-animejs-wrapper'
export const myAnimeComponent = () => {
return (
<Anime
style={{
backgroundColor: 'lightgrey',
width: '80px',
}}
config={{
translateY: [0, 20],
scale: [0.8, 1],
loop: true,
duration: 1500,
}}
>
<div>Find</div>
</Anime>
)
}
Stagger multiple elements, such as in a sidebar.
import React from 'react'
import Anime, { anime } from 'react-animejs-wrapper'
export const myAnimeComponent = () => {
return (
<Anime
style={{
display: 'flex',
flexDirection: 'column',
backgroundColor: 'lightgrey',
alignItems: 'left',
width: '80px',
}}
config={{
translateX: [-35, 0],
scale: [0, 1],
loop: true,
delay: anime.stagger(100, { start: 200 }),
}}
>
<div style={{ backgroundColor: 'grey', width: '50px', margin: '5px' }}>
Transit
</div>
<div style={{ backgroundColor: 'grey', width: '50px', margin: '5px' }}>
Food
</div>
<div style={{ backgroundColor: 'grey', width: '50px', margin: '5px' }}>
Events
</div>
</Anime>
)
}
Examples with Animation Controls
Attach a reference to the component, then you can access the controls within the component directly through the reference.
import React, { useRef } from 'react'
import Anime from 'react-animejs-wrapper'
export const myAnimeComponent = () => {
const blueSquare = {
height: '20px',
width: '20px',
backgroundColor: 'lightBlue',
};
const animatedSquaresRef = useRef(null)
const restart = () => animatedSquaresRef.current.restart();
const play = () => animatedSquaresRef.current.play();
const pause = () => animatedSquaresRef.current.pause();
const reverse = () => animatedSquaresRef.current.reverse();
const seek = () => animatedSquaresRef.current.seek(1000);
const seekPercent = () => animatedSquaresRef.current.seekPercent(50);
return (
<>
<Anime
ref={animatedSquaresRef}
config={{
translateX: 250,
delay: function (_, i) {
return i * 100;
},
loop: true,
direction: 'alternate',
easing: 'easeInOutSine',
autoplay: true,
}}
>
<div style={blueSquare}>1</div>
<div style={blueSquare}>2</div>
<div style={blueSquare}>3</div>
</Anime>
<button onClick={restart}>Reset Animation</button>
<button onClick={play}>Play Animation</button>
<button onClick={pause}>Pause Animation</button>
<button onClick={reverse}>Reverse Animation</button>
<button onClick={seek}>Seek to 1000 ms</button>
<button onClick={seekPercent}>Seek to 50%</button>
</>
)
}