react-animista

v1.0.2

Published

3 years ago

More than 200 free CSS animations from Animista website!

Downloads

0High
0Medium
0Low

madein83

CSS React Animation Transition UX/UI Animista

react-animista

npm npm npm npm bundle size

React component to be able to simply use animations from : http://animista.net/play

218 free animations are available!

Live demo

Demo (source)

Installation

Install with npm:

$ npm i -s react-animista

Usage

Import the Animista component from library:

import Animista from "react-animista";

Parameters:

| Name | Type | Description | | ---------------- | -------------------------------------------------------------------------------- | --------------------------------------------- | | type | string | AnimistaTypes | (required) The type of the wanted animation. | | style | React.CSSProperties | (optional) CSS style if needed. | | delay | string (default: 0ms) | (optional) Delay before animation starts. | | duration | string (default: 0ms) | (optional) Duration of the animation. | | hover | boolean | (optional) If animation must starts on hover. | | disabled | boolean (default: false) | (optional) If animation must be stopped. | | tag | string (default: div) | (optional) The tag to use. | | className | string | (optional) Aditionnal classes. | | direction | normal|reverse|alternate|alternate-reverse|initial|inherit (default: normal) | (optional) Animation direction | | iterationCount | number (default: 1) | (optional) The number of iterations | | onClick | Function | (optional) On click handler |

Example

Basic animation

import React from "react";
import Animista, { AnimistaTypes } from "react-animista";

const App: React.FC = () => {
  return (
    <article>
      <Animista type={AnimistaTypes.SCALE_UP_TOP}>Basic animation</Animista>
    </article>
  );
};

export default App;

Reversed animation

import React from "react";
import Animista, { AnimistaTypes } from "react-animista";

const App: React.FC = () => {
  return (
    <article>
      <Animista type={AnimistaTypes.SCALE_UP_TOP} direction="reverse">
        Reversed animation
      </Animista>
    </article>
  );
};

export default App;

Use another HTML tag

import React from "react";
import Animista, { AnimistaTypes } from "react-animista";

const App: React.FC = () => {
  return (
    <article>
      <Animista type={AnimistaTypes.SCALE_UP_TOP} tag="h1" direction="reverse">
        Wrapped in H1 tag
      </Animista>
    </article>
  );
};

export default App;

Use delay

import React from "react";
import Animista, { AnimistaTypes } from "react-animista";

const App: React.FC = () => {
  return (
    <article>
      <Animista type={AnimistaTypes.SCALE_UP_TOP} delay="5s">
        Animation starts in 5s
      </Animista>
    </article>
  );
};

export default App;

Use duration

import React from "react";
import Animista, { AnimistaTypes } from "react-animista";

const App: React.FC = () => {
  return (
    <article>
      <Animista type={AnimistaTypes.SCALE_UP_TOP} duration="5s">
        Animation starts now & will ends in 5s
      </Animista>
    </article>
  );
};

export default App;

Adding custom style(s)

import React from "react";
import Animista, { AnimistaTypes } from "react-animista";

const App: React.FC = () => {
  return (
    <article>
      <Animista
        type={AnimistaTypes.SCALE_UP_TOP}
        style={{
          width: 100,
          height: 100,
          backgroundColor: "lightblue"
        }}
      >
        Custom style
      </Animista>
    </article>
  );
};

export default App;

Adding custom classes

import React from "react";
import Animista, { AnimistaTypes } from "react-animista";

const App: React.FC = () => {
  return (
    <article>
      <Animista
        type={AnimistaTypes.SCALE_UP_TOP}
        className="my-custom-class and-another-one"
      >
        Custom classes
      </Animista>
    </article>
  );
};

export default App;

On click event handler

import React from "react";
import Animista, { AnimistaTypes } from "react-animista";

const App: React.FC = () => {
  return (
    <article>
      <Animista
        type={AnimistaTypes.SCALE_UP_TOP}
        onClick={() => console.log("Do your job")}
      >
        OnClick event handler
      </Animista>
    </article>
  );
};

export default App;

Animations types

SCALE_UP_BL
SCALE_UP_BOTTOM
SCALE_UP_BR
SCALE_UP_CENTER
SCALE_UP_HOR_CENTER
SCALE_UP_HOR_LEFT
SCALE_UP_HOR_RIGHT
SCALE_UP_LEFT
SCALE_UP_RIGHT
SCALE_UP_TL
SCALE_UP_TOP
SCALE_UP_TR
SCALE_UP_VER_BOTTOM
SCALE_UP_VER_CENTER
SCALE_UP_VER_TOP
SCALE_DOWN_BL
SCALE_DOWN_BOTTOM
SCALE_DOWN_BR
SCALE_DOWN_CENTER
SCALE_DOWN_HOR_CENTER
SCALE_DOWN_HOR_LEFT
SCALE_DOWN_HOR_RIGHT
SCALE_DOWN_LEFT
SCALE_DOWN_RIGHT
SCALE_DOWN_TL
SCALE_DOWN_TOP
SCALE_DOWN_TR
SCALE_DOWN_VER_BOTTOM
SCALE_DOWN_VER_CENTER
SCALE_DOWN_VER_TOP
ROTATE_BL
ROTATE_BOTTOM
ROTATE_BR
ROTATE_CENTER
ROTATE_DIAGONAL_1
ROTATE_DIAGONAL_2
ROTATE_DIAGONAL_BL
ROTATE_DIAGONAL_BR
ROTATE_DIAGONAL_TL
ROTATE_DIAGONAL_TR
ROTATE_HOR_BOTTOM
ROTATE_HOR_CENTER
ROTATE_HOR_TOP
ROTATE_LEFT
ROTATE_RIGHT
ROTATE_TL
ROTATE_TOP
ROTATE_TR
ROTATE_VERT_CENTER
ROTATE_VERT_LEFT
ROTATE_VERT_RIGHT
ROTATE_SCALE_DOWN
ROTATE_SCALE_DOWN_DIAG_1
ROTATE_SCALE_DOWN_DIAG_2
ROTATE_SCALE_DOWN_HOR
ROTATE_SCALE_DOWN_VER
ROTATE_SCALE_UP
ROTATE_SCALE_UP_DIAG_1
ROTATE_SCALE_UP_DIAG_2
ROTATE_SCALE_UP_HOR
ROTATE_SCALE_UP_VER
ROTATE_90_BL_CCW
ROTATE_90_BL_CW
ROTATE_90_BOTTOM_CCW
ROTATE_90_BOTTOM_CW
ROTATE_90_BR_CCW
ROTATE_90_BR_CW
ROTATE_90_CCW
ROTATE_90_CW
ROTATE_90_HORIZONTAL_BCK
ROTATE_90_HORIZONTAL_FWD
ROTATE_90_LEFT_CCW
ROTATE_90_LEFT_CW
ROTATE_90_RIGHT_CCW
ROTATE_90_RIGHT_CW
ROTATE_90_TL_CCW
ROTATE_90_TL_CW
ROTATE_90_TOP_CCW
ROTATE_90_TOP_CW
ROTATE_90_TR_CCW
ROTATE_90_TR_CW
ROTATE_90_VERTICAL_BCK
ROTATE_90_VERTICAL_FWD
FLIP_DIAGONAL_1_BCK
FLIP_DIAGONAL_1_BL
FLIP_DIAGONAL_1_FWD
FLIP_DIAGONAL_1_TR
FLIP_DIAGONAL_2_BCK
FLIP_DIAGONAL_2_BR
FLIP_DIAGONAL_2_FWD
FLIP_DIAGONAL_2_TL
FLIP_HORIZONTAL_BCK
FLIP_HORIZONTAL_BOTTOM
FLIP_HORIZONTAL_FWD
FLIP_HORIZONTAL_TOP
FLIP_VERTICAL_BCK
FLIP_VERTICAL_FWD
FLIP_VERTICAL_LEFT
FLIP_VERTICAL_RIGHT
FLIP_2_HOR_BOTTOM_1
FLIP_2_HOR_BOTTOM_2
FLIP_2_HOR_BOTTOM_BCK
FLIP_2_HOR_BOTTOM_FWD
FLIP_2_HOR_TOP_1
FLIP_2_HOR_TOP_2
FLIP_2_HOR_TOP_BCK
FLIP_2_HOR_TOP_FWD
FLIP_2_VER_LEFT_1
FLIP_2_VER_LEFT_2
FLIP_2_VER_LEFT_BCK
FLIP_2_VER_LEFT_FWD
FLIP_2_VER_RIGHT_1
FLIP_2_VER_RIGHT_2
FLIP_2_VER_RIGHT_BCK
FLIP_2_VER_RIGHT_FWD
FLIP_SCALE_DOWN_DIAG_1
FLIP_SCALE_DOWN_DIAG_2
FLIP_SCALE_DOWN_HOR
FLIP_SCALE_DOWN_VER
FLIP_SCALE_UP_DIAG_1
FLIP_SCALE_UP_DIAG_2
FLIP_SCALE_UP_HOR
FLIP_SCALE_UP_VER
FLIP_SCALE_2_HOR_BOTTOM
FLIP_SCALE_2_HOR_TOP
FLIP_SCALE_2_VER_LEFT
FLIP_SCALE_2_VER_RIGHT
SWING_BOTTOM_BCK
SWING_BOTTOM_FWD
SWING_BOTTOM_LEFT_BCK
SWING_BOTTOM_LEFT_FWD
SWING_BOTTOM_RIGHT_BCK
SWING_BOTTOM_RIGHT_FWD
SWING_LEFT_BCK
SWING_LEFT_FWD
SWING_RIGHT_BCK
SWING_RIGHT_FWD
SWING_TOP_BCK
SWING_TOP_FWD
SWING_TOP_LEFT_BCK
SWING_TOP_LEFT_FWD
SWING_TOP_RIGHT_BCK
SWING_TOP_RIGHT_FWD
SLIDE_BL
SLIDE_BOTTOM
SLIDE_BR
SLIDE_LEFT
SLIDE_RIGHT
SLIDE_TL
SLIDE_TOP
SLIDE_TR
SLIDE_BCK_BL
SLIDE_BCK_BOTTOM
SLIDE_BCK_BR
SLIDE_BCK_CENTER
SLIDE_BCK_LEFT
SLIDE_BCK_RIGHT
SLIDE_BCK_TL
SLIDE_BCK_TOP
SLIDE_BCK_TR
SLIDE_FWD_BL
SLIDE_FWD_BOTTOM
SLIDE_FWD_BR
SLIDE_FWD_CENTER
SLIDE_FWD_LEFT
SLIDE_FWD_RIGHT
SLIDE_FWD_TL
SLIDE_FWD_TOP
SLIDE_FWD_TR
SLIDE_ROTATE_HOR_B_BCK
SLIDE_ROTATE_HOR_B_FWD
SLIDE_ROTATE_HOR_BOTTOM
SLIDE_ROTATE_HOR_T_BCK
SLIDE_ROTATE_HOR_T_FWD
SLIDE_ROTATE_HOR_TOP
SLIDE_ROTATE_VER_L_BCK
SLIDE_ROTATE_VER_L_FWD
SLIDE_ROTATE_VER_LEFT
SLIDE_ROTATE_VER_R_BCK
SLIDE_ROTATE_VER_R_FWD
SLIDE_ROTATE_VER_RIGHT
SHADOW_DROP_BL
SHADOW_DROP_BOTTOM
SHADOW_DROP_BR
SHADOW_DROP_CENTER
SHADOW_DROP_LEFT
SHADOW_DROP_LR
SHADOW_DROP_RIGHT
SHADOW_DROP_TB
SHADOW_DROP_TL
SHADOW_DROP_TOP
SHADOW_DROP_TR
SHADOW_DROP_2_BL
SHADOW_DROP_2_BOTTOM
SHADOW_DROP_2_BR
SHADOW_DROP_2_CENTER
SHADOW_DROP_2_LEFT
SHADOW_DROP_2_LR
SHADOW_DROP_2_RIGHT
SHADOW_DROP_2_TB
SHADOW_DROP_2_TL
SHADOW_DROP_2_TOP
SHADOW_DROP_2_TR
SHADOW_POP_BL
SHADOW_POP_BR
SHADOW_POP_TL
SHADOW_POP_TR
SHADOW_INSET_BL
SHADOW_INSET_BOTTOM
SHADOW_INSET_BR
SHADOW_INSET_CENTER
SHADOW_INSET_LEFT
SHADOW_INSET_LR
SHADOW_INSET_RIGHT
SHADOW_INSET_TB
SHADOW_INSET_TL
SHADOW_INSET_TOP
SHADOW_INSET_TR

Credits

All amazing CSS animations are made by Ana Travas & Sergej Skrjanec.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-animista

Installation

Usage

Example

Basic animation

Reversed animation

Use another HTML tag

Use delay

Use duration

Adding custom style(s)

Adding custom classes

On click event handler

Animations types

Credits