ra
react-animejs
npm i react-animejs
ra

react-animejs

JM's react-animejs

by JM

0.5.6 (see all)License:MITTypeScript:Not Found
npm i react-animejs
Readme

JM's react-animejs

A React animation library for creating amazing React App.

react-animejs

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
react-animejs scrubber demo

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

PropertyDescriptionTypeOptional
setMetause this to pull in progress of the Anime Componentobjecttrue
iniitalanimation that will run on the initial rendering of the componentobjecttrue
_onUpdateanimation that will run on every update of a componentobjecttrue
_onUnmountanimation that will run on every unmount event of a componentobjecttrue
animeConfigconfiguration of the Anime of componentobjecttrue
explodechop the string into words or charactersstring 'characters' or 'words'
explodeOptionsoptions for the exloded elementsobject {{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

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

  • Julian Garnier for his amazing AnimeJS library

Downloads/wk

211

GitHub Stars

20

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

4

OPEN PRs

0
VersionTagPublished
0.5.6
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate