@mollycule/react-anime

React wrapper component <Anime /> for animejs

Usher life to your React Apps easily

Explore the docs »

View Demo · Report Bug · Request Feature . NPM Link

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License
• Contact
• Acknowledgements

About The Project

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.

Built With

• TypeScript
• Webpack
• React Transition Group
• AnimeJS

Getting Started

Prerequisites

Following Peer Dependencies are required for using redux-hooks package:

• react: ^16.8.0,
• react-transition-group: ^4.3.0,
• animejs: ^3.1.0

Installation

# 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

Usage

1. Single Element Animation

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.

1. 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.
2. mountOnEnter: By default component will be mounted only when animation starts or when in becomes true. It can controlled through this prop.
3. unmountOnExit: By default component will be unmounted when animation exits or when in becomes false. It can controlled through this prop.
4. appear: Normally the child inside <Anime> doesn't animate when it's mounted along with <Anime> as in set as true. Setting appear to true is important to view the child element transition or animate while mounting along with <Anime>. Read more here
5. onEntering, onEntered, onExiting, onExited: All these props take anime props config object in them that are executed on various phases of React Transition.
6. 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 each on* prop level, if its same.

Imperatively controlling animation by Anime helper methods.

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>
  )
}

2. Group or List Animation

• Staggered entering animtion

  <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.

• Dynamically entering and exiting list items using TransitionGroup

  <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 of TransitionGroup element in this case. It takes care of mounting and unmounting child elements by passing the accurate in prop accordingly.

  Note: Alias of TransitionGroup is also exported from the library as AnimeGroup and can be used inter-changeably.

  import Anime, { AnimeGroup } from "@mollycule/react-anime";

Contributing

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.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature)
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Param Singh - @paramsinghvc - [e-mail]

Project Link: https://github.com/paramsinghvc/react-anime

Acknowledgements

• GitHub Emoji Cheat Sheet
• Img Shields