GSAP CSS 3D Folio Card Fan Portfolio
Overview
Your projects as cards bound on one tilted spine and fanned all the way round, like the pages of a book stood on end, in plain CSS 3D. Scrolling spins the fan, dragging turns and tilts it, and hovering a card slides it out of the spine and plays its film.
The fan turns slowly about its spine, which leans back and to one side. The wheel or a trackpad spins it faster and it settles back to its slow turn; a sideways drag turns it with the hand and a flick carries on. Dragging up or down tilts it all the way round, and it stays tilted wherever it is left. With a mouse the fan also leans toward the pointer, and the arrow keys spin and tilt it (Home stands it back upright).
Details
- Category
- Gallery
- Interaction
- On Scroll + Drag + On Hover + Mouse Move
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 20 componentsBuilt with the same techniques
No. 013 / Gallery
GSAP CSS 3D Infinite Card Deck Portfolio
On Scroll · Drag · On Hover · On Load
No. 017 / Gallery
GSAP Scroll Unfolding Card Wheel Portfolio
On Scroll · On Hover · On Click · Mouse Move · On Load
No. 016 / Gallery
GSAP Parting Mosaic Wall Portfolio
On Scroll · Mouse Move · On Hover · On Click
(02)FAQ
GSAP CSS 3D Folio Card Fan Portfolio — FAQ
01What do I need to install?
npm install gsap @gsap/react. There's no WebGL: the fan is plain HTML in CSS 3D, and the sound is made with the Web Audio API. It's built for Next.js with Tailwind CSS v4 and uses next/image for the posters.
02How do I add my own projects?
Pass a projects array: title, category, year, video, poster and summary. Videos work best as 16:10 muted H.264 loops of 6 to 12 seconds and a few MB at most, each with a poster frame. The cards share the full circle evenly, so eight to twelve projects look best.
03Can I put other sections above or below it?
Give it a page of its own. The page doesn't scroll: the wheel, drags and arrow keys spin and tilt the fan instead.
04Can I turn the sound off?
Pass sound={false} and the fan stays silent with no toggle. Otherwise browsers only let a page make sound after a click, tap or key press, so it starts on the first one and the toggle at the bottom right asks for a click if the fan is spun before then.
05Which fonts does it use?
Your page's own mono font for the labels and the index tabs. Nothing extra to load.
06How do I tune the motion?
Every value is in config.ts: the card size, perspective and the spine's resting tilt, the idle turn and how much the wheel adds, drag and flick speeds, the lean toward the pointer, how far the open card slides out and how far the rest fade, the flick's volume and the colours.