Animations
React Peel provides two animation layers:
- The
usePeel hook for peel-specific motion.
- Utility helpers for lower-level control.
usePeel.animate
The animate function moves the peel corner from one position to another.
1import { PeelWrapper, PeelTop, PeelBack, PeelBottom, usePeel } from "react-peel";
2
3function AnimatedCard() {
4 const { peelRef, animate, reset } = usePeel();
5
6 const reveal = async () => {
7 await animate({
8 to: { x: -80, y: -80 },
9 duration: 600,
10 easing: "easeOut",
11 });
12 };
13
14 return (
15 <>
16 <button onClick={reveal}>Reveal</button>
17 <button onClick={reset}>Reset</button>
18
19 <PeelWrapper ref={peelRef} height={200} width={200}>
20 <PeelTop style={{ backgroundColor: "#81afcb" }} />
21 <PeelBack style={{ backgroundColor: "#a0c7df" }} />
22 <PeelBottom style={{ backgroundColor: "#688394" }} />
23 </PeelWrapper>
24 </>
25 );
26}
Supported easing names for usePeel.animate:
lineareaseIneaseOuteaseInOutspring
peelHint
Use peelHint to nudge the user toward the peel corner.
1import { peelHint } from "react-peel";
2
3await peelHint(peelRef.current, {
4 peekSize: 24,
5 duration: 300,
6 repeat: 2,
7});
loopPeel
Create a looping animation along a path.
1import { loopPeel } from "react-peel";
2
3const stop = loopPeel({
4 peel: peelRef.current,
5 path: [200, 200, -200, -200],
6 duration: 1200,
7 pingPong: true,
8});
9
10stop();
animatePeelPosition
Animate a peel instance directly using the shared easings set.
1import { animatePeelPosition } from "react-peel";
2
3animatePeelPosition({
4 peel: peelRef.current,
5 from: { x: 200, y: 200 },
6 to: { x: 40, y: 40 },
7 duration: 500,
8 easing: "easeInOut",
9});
Low-Level animate
The animate utility can be used for generic value animation.
1import { animate } from "react-peel";
2
3const { stop, finished } = animate({
4 from: 0,
5 to: 100,
6 duration: 500,
7 easing: "easeOut",
8 onUpdate: (value) => console.log(value),
9});
10
11await finished;
Combine with Events
1const { peelRef, animate } = usePeel();
2
3<PeelWrapper
4 ref={peelRef}
5 onPeelStart={(peel) => console.log("start", peel)}
6 onPeelProgress={(progress) => {
7 if (progress > 0.6) {
8 // Auto-complete past the halfway point
9 animate({ to: { x: 0, y: 0 }, duration: 300 });
10 }
11 }}
12 onPeelEnd={(peel) => console.log("end", peel)}
13>
14 ...
15</PeelWrapper>
