Usher life to your React Apps easily
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
.
NPM Link
AnimeJS has a lot to offer when to comes to do performant and literally any kind of animations possible with svg and Javascript. It supports everything from simple graphic transformations like translations, rotation, scaling to complex things like SVG morphing in a very concise api.
React Anime library is a way of incorporating these benefits of animejs in a react environment easily by simply using <Anime /> element passing in the transformation configs as props to various React Transition hooks.
React Anime leverages the React Transition Group API to run animations during various phases of React component like mounting and unmounting, which otherwise wouldn't have been possible.
Following Peer Dependencies are required for using redux-hooks package:
- react: ^16.8.0,
- react-transition-group: ^4.3.0,
- animejs: ^3.1.0
# Install the Peer Dependencies
npm i react react-transition-group animejs -S
# Install the typings if using a TS environment
npm i @types/react-transition-group @types/animejs -S
npm i @mollycule/react-anime -S
or
yarn add react react-transition-group animejs
yarn add @types/react-transition-group @types/animejs
yarn add @mollycule/react-anime -S
import Anime from "@mollycule/react-anime";
class App extends Component {
render() {
return (
<main>
<Anime
in
appear
duration={1000}
onEntering={{ translateY: [-20, 0], opacity: [0, 1] }}
onExiting={{ translateY: -20, opacity: 0 }}
easing="easeOutCubic"
>
<section>
<p> Hola Mundo </p>
</section>
</Anime>
</main>
);
}
}
export default App;
Below is the explanation of all the props being passed.
in
: It's used to tell animejs when to start the animation. You can pass a reactive prop to it to run it on a state prop change.mountOnEnter
: By default component will be mounted only when animation starts or whenin
becomes true. It can controlled through this prop.unmountOnExit
: By default component will be unmounted when animation exits or whenin
becomes false. It can controlled through this prop.appear
: Normally the child inside <Anime> doesn't animate when it's mounted along with <Anime> asin
set as true. Settingappear
to true is important to view the child element transition or animate while mounting along with <Anime>. Read more hereonEntering
,onEntered
,onExiting
,onExited
: All these props take anime props config object in them that are executed on various phases of React Transition.- Any anime props that can be passed into each of these props above can be given at the root level as well. For eg:
duration
can be specified at <Amime duration={2000} > level than at eachon*
prop level, if its same.
Anime supports various helper methods for controlling the animation instance like play/pause/reset on some event. One can grab the reference of the current animation instance by passing React ref in animeRef
prop as
import React, { FC, useEffect, useRef } from "react";
import Anime from "shared/components/Anime";
import animejs, { AnimeInstance } from "animejs";
const MyComp: FC = () => {
const animeRef = useRef<AnimeInstance>();
useEffect(() => {
setTimeout(() => {
if (animeRef.current) {
animeRef.current.pause();
// or
animeRef.current.reset();
}
}, 1000);
}, []);
return (
<section>
<Anime
in
appear
duration={2000}
onEntering={{ translateX: [300, 0], opacity: [0.5, 1], easing: "linear" }}
animeRef={animeRef}
>
<span></span>
</Anime>
</section>
)
}
-
<Transactions> <Anime in duration={300} appear onEntering={{ translateY: [100, 0], opacity: [0, 1], delay: animejs.stagger(60), easing: "linear" }} > {transactions.map(transaction => ( <TransactionItem key={transaction.timestamp}> <Heading> Exchanged from GBP to USD </Heading> <Timestamp>{transaction.date} </Timestamp> </TransactionItem> ))} </Anime> </Transactions>
Simply, the <Anime> can be supplied a set of children and an Anime
delay
property can be used to simulate the stagger effect. -
<TransitionGroup> {fruits && fruits.map((fruit, i) => ( <Anime appear key={fruit} onEntering={{ translateX: [-200, 0], opacity: [0, 1], duration: 200, delay: i * 40 }} onExiting={{ translateX: "100%", opacity: 0, easing: "easeInOutQuad", duration: 300 }} duration={300} > <ListItem key={fruit}> <span>{fruit}</span> <DeleteButton onClick={handleItemDelete(i)}>-</DeleteButton> </ListItem> </Anime> ))} </TransitionGroup>
When there's a use case of dynamically adding or removing the elements from the array of elements in a state variable, each element has to be individually wrapped in it's own Anime or Transition element. The
in
prop of each element is provided by the virtue ofTransitionGroup
element in this case. It takes care of mounting and unmounting child elements by passing the accuratein
prop accordingly.Note: Alias of
TransitionGroup
is also exported from the library asAnimeGroup
and can be used inter-changeably.import Anime, { AnimeGroup } from "@mollycule/react-anime";
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
Param Singh - @paramsinghvc - paramsinghvc@gmail.com
Project Link: https://github.com/paramsinghvc/react-anime