GSAP Flip Filterable Portfolio Grid for React
Overview
A filterable project grid for React and Next.js, animated with GSAP Flip. Cards glide to their new places, a red shutter closes over the ones that leave and opens over the ones that arrive, and the result count rolls.
Press a filter and the grid rearranges itself with GSAP Flip. Cards that stay glide to their new spot, cards that leave disappear behind a red shutter, and new ones arrive as the shutter opens. The grid eases to its new height so nothing below it jumps, and the big count rolls each digit on its own wheel.
Details
- Category
- Gallery
- Interaction
- On Click + On Scroll + On Hover
- Trigger
- On Click
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 036 / Careers
GSAP Careers Page Section with Animated Job Filters
On Click · On Hover · On Scroll
No. 092 / Comparison
GSAP Comparison Table Section: Us vs Them with Flip
On Scroll · On Click
No. 074 / Pricing
GSAP Animated Pricing Section with Rolling Prices
On Click · On Scroll · Mouse Move
(02)FAQ
GSAP Flip Filterable Portfolio Grid for React — FAQ
01How do I add my projects and filters?
Pass items with a title, image, alt text and tags. The buttons are built from those tags, or you can pass filters to choose them and their order.
02Do I need a paid GSAP plugin?
No. Flip ships in the regular gsap package, and the source imports it directly.
03Can a filter show projects with any of the selected tags instead of all?
Yes. Change every to some in the matches function at the top of the file. Treat an empty selection as show all, since some would hide everything.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Images load through next/image. Black rules and text use your page's text colour.
05What happens with reduced motion?
Results and the count change instantly, with no Flip, shutters or entrance animation. Everything else works the same.