Getting Started

Easily add CSS animation to your react components via custom hooks.

All the animations are created with CSS Animations && @keyframes

Installation

You can install @frigobar/animation using either of the methods below.

For npm users:

npm install @frigobar/animation --save

For Yarn users:

yarn add @frigobar/animation

An important note is that the styled-components is a peerDependency see why, if you dont have styled-components installed you’ll need to install.

Usage

You can simply import the desired animation from the package and use it in any component.

It’s highly recommended to install the babel-plugin to use the animation prop to apply your animations.

Example:

import { useFade } from '@frigobar/animation';

const App = () => {
  const [{ animation }] = useFade();

  return <div animation={animation}>fade</div>;
};

Example without animation prop:

import React from 'react';
import styled from 'styled-components';
import { useFade } from '@frigobar/animation';

const Div = styled.div`
  animation: ${props => props.myAnimation};
`;

const Button = props => {
  const [{ animation }] = useFade({
    startOnRender: true,
  });

  return (
    <>
      <button
        {...props}
        css={`
          animation: ${animation};
        `}
      />

      <Div myAnimation={animation}>animation</Div>
    </>
  );
};

export default Button;