react-turn-reveal

A 3D reveal animation library for React.

Install

npm install --save react-turn-reveal

Usage

See the interactive documentation for demonstrative usage examples.

TurnReveal

import TurnReveal, { Direction, Pose } from "react-turn-reveal";

const perspective = 400;

const YourComponent = () => (
  <div style={{ position: "relative", perspective: perspective + "px" }}>
    <TurnReveal
      pose={Pose.closed}
      direction={Direction.right}
      perspective={perspective}
    >
      <div>Lorem ipsum</div>
    </TurnReveal>
    <img src="background.png" alt="background" />
  </div>
);

FollowReveal

import FollowReveal from "react-turn-reveal";

const perspective = 400;

const YourComponent = (
  <div style={{ position: "relative", perspective: perspective + "px" }}>
    <FollowReveal perspective={perspective}>
      <div>Lorem ipsum</div>
    </FollowReveal>
    <img src="background.png" alt="background" />
  </div>
);

Acknowledgements

Adapted from https://codepen.io/noeldelgado/pen/pGwFx

Limitations

• Special perspective styling (like `perspective-origin) is not taken into account. (PR's for this are welcome)
• A separate element is needed to catch mouse events and measure the size of the animated component. In order to allow multiple reveals to use the same perspective container any layout styling applied to the animated element has to be duplicated for the separate elements with the className prop. It is still possible to use one perspective container per animated component and put these in the desired layout, which doesn't require passing the className for that layout. (See the FollowReveal Grid example)

Contributing

See CONTRIBUTING.md

License

GNU GPL v3.0 © cdfa