1.0.0 • Published 4 years ago
react-turn-reveal v1.0.0
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 theclassName
for that layout. (See the FollowReveal Grid example)
Contributing
See CONTRIBUTING.md
License
GNU GPL v3.0 © cdfa
1.0.0
4 years ago