Custom Animations

This page is for v4 of the legacy react-awesome-reveal package. Read the Awesome Reveal docs for the new @awesome-reveal/* packages, and the migration guide to move from v4.

If the included effects do not suite your needs, you can define custom animations for your components!

To do so, import the Reveal component and pass it a keyframes prop:

import { keyframes } from "@emotion/react";
import { Reveal } from "react-awesome-reveal";

const customAnimation = keyframes`
  from {
    opacity: 0;
    transform: translate3d(-200px, -100px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
`;

function CustomAnimation({ children }) {
  return <Reveal keyframes={customAnimation}>{children}</Reveal>;
}

Default Effect

If no keyframes prop is passed, the default rendered animation is a fading entrance from the left, equivalent to:

<Fade direction="left">...</Fade>

Other Props

The Reveal component also accepts all common props described in the Revealing Effects page.