react-animejs

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 run

npm 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 remember to place _ 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 by default Anime Components are <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 a pull 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 details

Acknowledgments

• Julian Garnier for his amazing AnimeJS library