Skip to main content

Custom Animations

Starting from version 3.2.0, you can define custom animations! Simply import the Reveal component (which is the default export of the library – give it the name you want) and pass it a keyframes prop:

import React from "react";
import Reveal from "react-awesome-reveal";
import { keyframes } from "@emotion/react";
const customAnimation = keyframes`
from {
opacity: 0;
transform: translate3d(-200px, -100px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
`;
function MyAnimatedComponent({ children }) {
return (
<Reveal keyframes={customAnimation}>
{children}
</Reveal>;
);
}

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#

You can also pass these props to Reveal:

  • cascade
  • damping
  • delay
  • duration
  • fraction
  • triggerOnce
  • className and childClassName
  • style and childStyle
  • onVisibilityChange