Page Flip Animation
| Component | components/story/PageTurn.tsx |
| Used by | components/story/StoryBook.tsx |
What it does
Provides a 3D perspective-based page flip animation when navigating between story pages. Simulates the feel of turning a real book page.
How it works
Uses Framer Motion's AnimatePresence with custom variants that rotate the page on the Y-axis:
- Forward (next page): Current page rotates out to the left (-90°), new page rotates in from the right (90°)
- Backward (previous page): Current page rotates out to the right (90°), new page rotates in from the left (-90°)
The parent container has perspective: 1200px to create the 3D depth effect. Each page uses preserve-3d transform style and backface-visibility: hidden.
Animation parameters
| Property | Value |
|---|---|
| Duration | 0.5s (rotation: 0.6s) |
| Easing | [0.4, 0, 0.2, 1] (ease-out cubic) |
| Opacity fade | 0.3s |
| Scale | 0.95 → 1 (subtle zoom) |
| Perspective | 1200px |
Navigation triggers
- Swipe left/right (touch)
- Arrow keys (keyboard)
- Navigation buttons (click)
- Auto-advance after audio ends (auto-read mode)