GSAP Flip Card

A thumbnail-to-preview card component for portfolios, product galleries, case-study visuals, travel stories, editorial pages, and image-led interfaces where the selected card should feel physically connected to its new position.

GSAP

Overview

GSAP Flip Card turns image selection into a spatial handoff.

A user selects a thumbnail, and the chosen card animates into a larger preview area without feeling like a disconnected replacement. The movement preserves visual continuity: the selected image feels like the same object travelling from one place in the layout to another.

Use GSAP Flip Card when a gallery needs more craft than a static preview and more continuity than a normal image swap. It works for portfolios, product images, visual archives, travel galleries, editorial image sets, creative case studies, and landing-page sections where selection should feel tactile.

The page job is continuity. The visitor should understand exactly which item they selected, where it moved, and why the preview changed. The animation should make the layout feel intelligent, not make the card perform gymnastics before showing a mountain photo.

Usage Code

page

1import GsapFlipCard from '@/components/effects/gsap-flip-card'2 3const page = () => {4  return (5    <>6    <GsapFlipCard/>7    </>8  )9}10 

Example Production Use Case

A travel gallery can use GSAP Flip Card to let visitors move selected images from a thumbnail rail into a large preview. The selected image does not simply appear. It travels into focus, making the relationship between thumbnail and preview easy to understand.

The outcome is continuity. The visitor keeps orientation while browsing the set.

A portfolio page can use the same component for project previews. Each thumbnail opens into a larger case-study image, supported by a short caption and CTA. The movement makes the selected project feel important without opening a new page too early.

Best Used For

Portfolio image galleries where selected work needs a larger preview.
Product galleries where thumbnails should expand into focus.
Travel, photography, fashion, and editorial image sets.
Case-study sections where visual selection should feel connected.
Visual archives where browsing benefits from thumbnail-to-preview continuity.
Landing pages where one selected image should carry the section.

Not For

Not for dense ecommerce grids, pricing sections, documentation, long text cards, legal content, or interfaces where users need instant comparison across many items.

Not for unstable layouts where images, captions, or containers constantly change size. FLIP rewards discipline. It punishes chaos with visible weirdness.

Not for content where a simple grid would be faster, clearer, and more useful.

Performance Budget

Optimise image sizes, keep card count controlled, and avoid triggering layout measurement across a huge DOM subtree. FLIP works by measuring layout states, so keep the animated scope tight.

Avoid running expensive animations on every hover. Use click or deliberate selection where possible. Clean up GSAP timelines and contexts on unmount.

On lower-power devices, reduce shadow intensity, animation duration, and simultaneous card movement.

Accessibility and Mobile

Use semantic buttons for thumbnails, meaningful image alt text, visible focus states, and clear selected state. When a card becomes the preview, preserve a logical reading order and avoid moving focus unexpectedly unless the interaction requires it.

On mobile, simplify the layout into a stacked preview with a horizontal thumbnail rail or swipe-friendly sequence. For reduced motion, switch selected images instantly or with a minimal fade, without FLIP travel, scaling, or layout-flight animation.

Common Mistakes

Forgetting to register the GSAP Flip plugin.
Measuring layout after the state has already changed incorrectly.
Using inconsistent image ratios that make the movement feel broken.
Animating too many cards at once.
Making thumbnails clickable without keyboard support.
Hiding captions inside images.
Using FLIP when a normal image swap would be clearer.

Changelog

v1.0.0

Sep 10, 2026

Initial release

API Reference

Prop	Type	Default	Description
`duration`	number	`0.7`	Card transition duration in seconds.
`rounded`	number	`20`	Card corner radius in pixels.
`stackRotation`	number	`0`	Rotation per card in the collapsed desktop stack, in degrees.
`thumbGap`	number	`12`	Spacing between desktop rail thumbnails in pixels.
`backgroundColor`	color	`#e9e9e7`	Section background color.
`textColor`	color	`#111111`	Primary text color.
`mutedColor`	color	`#8a8a86`	Secondary text color.

Questions, Answered.

What is GSAP Flip Card?

GSAP Flip Card is a React component that uses GSAP’s Flip plugin to animate image cards between thumbnail and large preview states.

What does FLIP mean?

FLIP stands for First, Last, Invert, Play. It is an animation technique where the layout’s before-and-after positions are measured, then animated so the transition feels physically continuous.

How do I keep GSAP Flip Card accessible?

Use real buttons for thumbnails, provide meaningful alt text, maintain visible focus states, expose selected state clearly, and preserve a logical reading order.

What should reduced motion do?

Reduced motion should remove FLIP travel, scaling, and layout-flight animation. Use an instant selection change or a minimal fade.

Can Hyperiux adapt GSAP Flip Card for a real brand system?

Yes. A custom version should define thumbnail layout, preview rules, FLIP timing, image ratios, caption strategy, keyboard behaviour, mobile fallback, accessibility states, reduced-motion handling, source handoff, and implementation notes.

Request a Custom Animation

Need a custom effect? Tell us what to create.