Custom Animations

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.