GSAP Comparison Table Section: Us vs Them with Flip
Overview
An animated comparison table for React and Next.js. Rows rise in on scroll, check marks draw themselves, a highlight floats behind your column, and an only-show-differences switch collapses identical rows with GSAP Flip.
It's a real HTML table with row and column headers, so screen readers can navigate it cell by cell and checks are read as Yes or No. Flip the switch and the identical rows fade out, the remaining rows glide up to their new places, and the page below eases up with them rather than jumping. Flip it back and the rows return with their checks drawn again.
Details
- Category
- Comparison
- Interaction
- On Scroll + On Click
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 047 / Gallery
GSAP Flip Filterable Portfolio Grid for React
On Click · On Scroll · On Hover
No. 058 / Features
GSAP Image Hotspots Section with Animated Leader Lines
On Hover · On Click · On Scroll
No. 059 / Integrations
GSAP Integrations Section with Animated SVG Wires
On Hover · On Scroll
(02)FAQ
GSAP Comparison Table Section: Us vs Them with Flip — FAQ
01How do I fill it in?
Pass columns and rows. Each row has a feature name and one value per column, in order: true or false draws a check or a cross, and a string prints as text. The first column is yours and carries the highlight.
02How does it decide which rows are identical?
A row counts as identical when every column has the same value. On phones it compares only your column and the one currently picked, because those are the two on screen.
03Will the sticky header sit under my fixed nav?
Set stickyTop to your nav's height in pixels. Also avoid putting the table inside a parent with overflow hidden, because that stops position: sticky from working.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Flip ships with gsap. It uses your page's font, and looks best with a heavy grotesk: the demo loads Archivo at weights 800 and 900.
05What happens with reduced motion?
Rows and checks are visible from the start, the highlight stays still, and the switch changes the table instantly.