Flip Cards Code
Endpoint: /17-showup-cards
Interactive fanning cards and scroll-pinned cards flipping in 3D perspective space.
📦 GSAP: ^3.15.0
📦 @gsap/react: ^2.1.2
⚙️ ScrollTrigger: ✅ Required
page.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364
"use client";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Image from "next/image";
import { useRef } from "react";
gsap.registerPlugin(useGSAP, ScrollTrigger);
interface StageItem {
id: number;
num: string;
title: string;
accentClass: string;
accentHex: string;
imgUrl: string;
phase: string;
desc: string;
}
const stageData: StageItem[] = [
{
id: 1,
num: "01",
title: "PLAN & SCOPE",
accentClass: "bg-wtf-orange",
accentHex: "229, 91, 60",
imgUrl: "/Untitled design.png",
phase: "PHASE 01",
desc: "Gathering system requirements, wireframing workflows, and compiling API matrices.",
},
{
id: 2,
num: "02",
title: "STYLING & TOKEN",
accentClass: "bg-wtf-green",
accentHex: "12, 147, 103",
imgUrl: "/Untitled design (1).png",
phase: "PHASE 02",
desc: "Specifying layout structures, fine-grain noise textures, and asymmetric skews.",
},
{
id: 3,
num: "03",
title: "DEVELOP & DEPLOY",
accentClass: "bg-wtf-blue",
accentHex: "59, 130, 246",
imgUrl: "/Untitled design (2).png",
phase: "PHASE 03",
desc: "Compiling optimized route structures, loading counter staggers, and final page builds.",
},
];
export default function ShowUpCardsPage() {
const containerRef = useRef<HTMLDivElement>(null);
useGSAP(
() => {
const scroller = containerRef.current?.closest("#main-scroller") || undefined;
const smoothStep = (p: number) => p * p * (3 - 2 * p);
// Pin the showup card section during viewport scroll
ScrollTrigger.create({
trigger: containerRef.current,
scroller: scroller,
start: "top top",
end: "bottom bottom",
pin: ".showup-cards-sec",
pinSpacing: false,
});
// Fall, Scale and Flip Service Cards
ScrollTrigger.create({
trigger: containerRef.current,
scroller: scroller,
start: "top top",
end: "bottom bottom",
scrub: 1,
onUpdate: (self) => {
const progress = self.progress;
["#card-1", "#card-2", "#card-3"].forEach((cardId, index) => {
const delay = index * 0.5;
const cardProgress = gsap.utils.clamp(
0,
1,
(progress - delay * 0.1) / (0.9 - delay * 0.1),
);
const innerCard = document.querySelector(
`${cardId} .flip-card-inner`,
);
let y;
if (cardProgress < 0.4) {
const normalizedProgress = cardProgress / 0.4;
y = gsap.utils.interpolate(
"-100%",
"40%",
smoothStep(normalizedProgress),
);
} else if (cardProgress < 0.6) {
const normalizedProgress = (cardProgress - 0.4) / 0.2;
y = gsap.utils.interpolate(
"40%",
"0%",
smoothStep(normalizedProgress),
);
} else {
y = "0%";
}
let scale;
if (cardProgress < 0.4) {
const normalizedProgress = cardProgress / 0.4;
scale = gsap.utils.interpolate(
0.25,
0.75,
smoothStep(normalizedProgress),
);
} else if (cardProgress < 0.6) {
const normalizedProgress = (cardProgress - 0.4) / 0.2;
scale = gsap.utils.interpolate(
0.75,
1,
smoothStep(normalizedProgress),
);
} else {
scale = 1;
}
let opacity;
if (cardProgress < 0.2) {
const normalizedProgress = cardProgress / 0.2;
opacity = smoothStep(normalizedProgress);
} else {
opacity = 1;
}
let x, rotate, rotationY;
if (cardProgress < 0.6) {
x = index === 0 ? "100%" : index === 1 ? "0%" : "-100%";
rotate = index === 0 ? -5 : index === 1 ? 0 : 5;
rotationY = 0;
} else if (cardProgress < 1) {
const normalizedProgress = (cardProgress - 0.6) / 0.4;
x = gsap.utils.interpolate(
index === 0 ? "100%" : index === 1 ? "0%" : "-100%",
"0%",
smoothStep(normalizedProgress),
);
rotate = gsap.utils.interpolate(
index === 0 ? -5 : index === 1 ? 0 : 5,
0,
smoothStep(normalizedProgress),
);
rotationY = smoothStep(normalizedProgress) * 180;
} else {
x = "0%";
rotate = 0;
rotationY = 180;
}
gsap.set(cardId, {
opacity: opacity,
y: y,
x: x,
rotate: rotate,
scale: scale,
});
if (innerCard) {
gsap.set(innerCard, {
rotationY: rotationY,
});
}
});
},
});
},
{ scope: containerRef },
);
const { contextSafe } = useGSAP({ scope: containerRef });
// Mouse tilt on cards when pointer hovers
const handleMouseMove = contextSafe((e: React.MouseEvent<HTMLDivElement>) => {
const card = e.currentTarget;
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
card.style.setProperty("--mouse-x", `${x}px`);
card.style.setProperty("--mouse-y", `${y}px`);
const rotateY = ((x - rect.width / 2) / (rect.width / 2)) * 6;
const rotateX = -((y - rect.height / 2) / (rect.height / 2)) * 6;
gsap.to(card, {
rotateX: rotateX,
rotateY: rotateY,
transformPerspective: 1000,
ease: "power1.out",
duration: 0.35,
overwrite: "auto",
});
});
const handleMouseLeave = contextSafe(
(e: React.MouseEvent<HTMLDivElement>) => {
const card = e.currentTarget;
gsap.to(card, {
rotateX: 0,
rotateY: 0,
ease: "elastic.out(1.1, 0.4)",
duration: 0.75,
overwrite: "auto",
});
},
);
return (
<div
className="relative min-h-[280vh] bg-[#f0eadf] text-[#2a2a2a] selection:bg-wtf-yellow selection:text-black overflow-x-hidden font-sans"
ref={containerRef}
>
{/* Tactile Grid Backgrounds */}
<div className="absolute inset-0 dot-grid opacity-15 pointer-events-none z-0" />
<div className="absolute inset-0 noise-overlay pointer-events-none z-10" />
{/* Floating Back Button */}
<div className="fixed top-6 left-6 z-50 pointer-events-auto">
<button
onClick={() =>
window.history.length > 1
? window.history.back()
: (window.location.href = "/")
}
className="brutalist-btn bg-wtf-yellow text-xs font-mono font-bold py-2.5 px-4 rounded-md uppercase cursor-pointer"
>
← Back
</button>
</div>
{/* Page Heading readout (absolute right) */}
<div className="absolute top-6 right-6 z-30 flex flex-col items-end gap-1 select-none text-right">
<span className="font-mono text-[10px] font-bold text-zinc-500 uppercase tracking-widest border border-zinc-300 bg-white px-2 py-0.5 rounded">
Component 17
</span>
<h1 className="font-serif font-black text-lg uppercase text-[#2a2a2a]">
Showup Cards
</h1>
</div>
{/* Interactive Cards Overlay (Pins on scroll) */}
<section className="showup-cards-sec relative w-full h-[calc(100vh-64px)] flex flex-col justify-center items-center bg-[#f8f5ee] border-b-3 border-[#2a2a2a] overflow-hidden">
<div className="absolute inset-0 dot-grid opacity-15" />
{/* Simple Header Inside Container */}
<div className="text-center select-none max-w-lg mb-8 pointer-events-none z-10">
<span className="font-mono text-[10px] font-bold text-zinc-400 block tracking-widest">
[ ASSEMBLY SEQUENCING ]
</span>
<h2 className="text-2xl md:text-3xl font-serif font-black uppercase text-[#2a2a2a] leading-none mt-2">
Scroll to Build Nodes
</h2>
<p className="font-mono text-[9px] text-zinc-450 mt-1 uppercase tracking-wider">
[ Cards will fall, assemble, and flip 180° ]
</p>
</div>
<div className="cards-container w-full max-w-4xl flex items-center justify-center gap-6 md:gap-8 px-4 pointer-events-auto">
{stageData.map((stage) => (
<div
key={stage.id}
className="card w-48 aspect-[5/7] md:w-56 opacity-0 flex-1 relative transform-gpu"
id={`card-${stage.id}`}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
style={{
transformStyle: "preserve-3d",
transform: "perspective(1000px) rotateX(0deg) rotateY(0deg)",
}}
>
<div
className="card-wrapper w-full h-full animate-[floating_2.5s_infinite_ease-in-out] transform-gpu"
style={{ animationDelay: `${(stage.id - 1) * 0.25}s` }}
>
<div className="flip-card-inner w-full h-full preserve-3d relative">
{/* Front Side Face */}
<div className="flip-card-front absolute inset-0 brutalist-card p-4 bg-white text-[#2a2a2a] flex flex-col justify-between backface-hidden cursor-pointer select-none">
<div className="flex justify-between items-center">
<span className="font-mono text-[9px] font-bold text-zinc-400">
[{stage.phase}]
</span>
<span
className={`inline-block border border-black px-2 py-0.5 rounded-full text-[8px] font-mono font-bold text-white uppercase ${stage.accentClass}`}
>
FLIP NODE
</span>
</div>
<div className="inner-img-frame w-full h-[140px] md:h-[180px] border-2 border-[#2a2a2a] relative overflow-hidden rounded-lg bg-zinc-50 my-2 shadow-[2px_2px_0px_#2a2a2a]">
<Image
src={stage.imgUrl}
alt={stage.title}
fill
sizes="200px"
className="object-cover"
/>
</div>
<div className="flex justify-between items-center border-t border-zinc-200 pt-2">
<h3 className="font-serif font-black text-xs text-[#2a2a2a]">
{stage.title}
</h3>
<span className="font-mono text-[10px] text-zinc-400 font-bold">
0{stage.id}
</span>
</div>
</div>
{/* Back Side Face (Scroll-revealed) */}
<div className="flip-card-back absolute inset-0 brutalist-card p-4 bg-white border-3 border-[#2a2a2a] text-[#2a2a2a] flex flex-col justify-between rotate-y-180 backface-hidden cursor-pointer select-none">
<div className="w-full flex justify-between font-mono font-bold text-[9px] uppercase border-b-2 border-black pb-2 items-center">
<span className="text-zinc-400">
0{stage.id} {"//"} NODE DETAILS
</span>
<span
className={`h-2.5 w-2.5 rounded-full border border-black animate-pulse ${stage.accentClass}`}
/>
</div>
<div className="inner-img-frame w-full h-[140px] md:h-[180px] border-2 border-[#2a2a2a] relative overflow-hidden rounded-lg bg-zinc-50 my-2 shadow-[2px_2px_0px_#2a2a2a]">
<Image
src={stage.imgUrl}
alt={stage.title}
fill
sizes="200px"
className="object-cover"
/>
</div>
<div className="flex-1 flex items-center justify-center py-2">
<p className="text-[10px] md:text-[11px] font-sans font-bold text-zinc-650 leading-snug text-center">
{stage.desc}
</p>
</div>
<div className="flex justify-between items-center border-t border-zinc-200 pt-2 font-mono text-[8px] text-zinc-400 font-black">
<span>STATUS: ONLINE</span>
<span>SECURE // OK</span>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</section>
</div>
);
}
master*0 ⓧ0 ⚠
Ln 364, Col 1Spaces: 2UTF-8TypeScript JSXPrettier
⚙️ Setup & Integration Guide
How to install, import, and configure this animation in your project
💻
Option A: Install via CLI (Recommended)
You can install this component directly into your project via the TweenLabs CLI. It automatically creates the file and configures dependencies:
npx tweenlabs add showup-cards
Option B: Manual Installation
Follow these steps to integrate the component into your project manually:
1
Install Packages
First, install GSAP and its official React hook helper library (@gsap/react).
npm install gsap @gsap/react
2
Add Required CSS Styles
Copy the styles from the Required CSS tab above, or open the styles.css file that was automatically downloaded with your component. Paste these classes into your global stylesheet (e.g. src/app/globals.css or similar).
3
Create Component File
Create a new file in your React or Next.js project (e.g. src/components/FlipCards.tsx) and paste the code from the Standalone React Component tab above. If no standalone tab is available, copy the full page file code and adjust the routing logic for your needs.
⚠️ ScrollTrigger Plugin Notice
This component uses scroll-triggered timing events. Make sure to register the plugin as shown inside the code:
GSAP Registration
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(useGSAP, ScrollTrigger);4
Import & Render
Import and render the component in your page or view layout:
App Page
import FlipCards from "@/components/FlipCards";
export default function Page() {
return (
<main className="min-h-screen p-8 bg-[#f5f5f5] flex items-center justify-center">
<FlipCards />
</main>
);
}💡
Customization & Component Properties
🛠️ Customization & Component Properties (Props)
You can pass the following settings to configure the layout and animation details:
cards(Array): List of cards that fall, scatter horizontally, and flip 180° on scroll scrub.