Flip card

A two-faced card turns over on a click, drag or flick and settles on a spring.

enhancer
click
drag
3d
card
spring
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Flip card example

TideClick, drag or flick me

The other side

Two faces, one card. It turns on a spring, and screen readers hear only the face you see.

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<div class="m-flip-card" data-motion="flip-card">
  <div><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' width='300' height='400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239be7ff'/%3E%3Cstop offset='.5' stop-color='%233b82f6'/%3E%3Cstop offset='1' stop-color='%23172554'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='220' cy='90' r='26' fill='%23f0fbff'/%3E%3Cpath d='M0 220 Q40 205 75 220 T150 220 T225 220 T300 220 V400 H0Z' fill='%232563eb' opacity='.7'/%3E%3Cpath d='M0 270 Q40 252 80 270 T160 270 T240 270 T320 270 V400 H0Z' fill='%231d4ed8' opacity='.8'/%3E%3Cpath d='M0 330 Q50 310 100 330 T200 330 T300 330 V400 H0Z' fill='%230f1f5c'/%3E%3C/svg%3E" alt=""><b>Tide</b><span>Click, drag or flick me</span></div>
  <div class="m-flip-card-b"><b>The other side</b><p>Two faces, one card. It turns on a spring, and screen readers hear only the face you see.</p></div>
</div>

import { FlipCard } from "./motion/react/FlipCard";

<FlipCard>Your content</FlipCard>

<script setup lang="ts">
import FlipCard from "./motion/vue/FlipCard.vue";
</script>

<template>
  <FlipCard>Your content</FlipCard>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "flip-card";

The wrappers: FlipCard.tsx (React, TypeScript) and FlipCard.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-axis`	`y`	`y` turns sideways, `x` turns up and over
`data-motion-stiffness`	`180`	spring stiffness
`data-motion-damping`	`17`	spring damping (lower bounces more)
`data-motion-perspective`	`1100`	perspective distance in pixels

Only transforms move. The hidden face is inert, so focus and screen readers reach just the face you see, and aria-pressed says which side is up. On touch, a sideways drag turns the card and up or down still scrolls. Reduced motion: the card changes face at once, without turning.

Size

flip-card.js is 1.9 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.