Getting Started

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

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


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.


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.


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 (
animation: ${animation};
<Div myAnimation={animation}>animation</Div>
export default Button;