motion-flip-card

Two-sided card that flips between a front and back slot with spring physics. Trigger on hover or click; choose the rotation axis.

Preview: Hover, Y axis

Hover
Hello!

Preview: Click, X axis

Click me
Bouncier

Import

import 'motion-components/motion-flip-card'   // just this one
import 'motion-components'               // or the whole library

Usage

<motion-flip-card trigger="click" axis="y">
  <div slot="front" class="card">Tap me</div>
  <div slot="back"  class="card">Hello, back side.</div>
</motion-flip-card>

Sizing

The host is inline-block by default. Give it an explicit width and height (or set display: block). Both faces fill the host. 

motion-flip-card {
  display: block;
  width: 240px;
  height: 320px;
}

Programmatic flip

Call flip() on the element to toggle from script. It fires motion-change. To show a face without an event, set the flipped property or attribute instead.

import type { MotionFlipCard } from 'motion-components'

const card = document.querySelector<MotionFlipCard>('motion-flip-card')!
card.flip()          // turns the card and fires motion-change
card.flipped = true  // shows the back, no event

card.addEventListener('motion-change', (event) => {
  if (event.target !== card) return
  console.log(event.detail.flipped ? 'back' : 'front')
})

Properties

Attribute Property Type Default Description
trigger trigger "hover" | "click" "hover" What flips the card
axis axis "y" | "x" "y" Rotation axis: y (around vertical) or x (around horizontal)
duration duration number 0.7 Spring duration of the flip, in seconds
bounce bounce number 0.2 Spring bounciness (0 = critically damped, higher = more elastic)
perspective perspective number 1000 CSS perspective applied to the host, in pixels
flipped flipped boolean false Whether the back is showing. Reflects to the attribute. Setting it turns the card without firing motion-change

Slots

Slot Type Default Description
front element — The face shown at rest
back element — The face revealed after flipping

Methods

Method Description
flip() Toggles the card between front and back and fires motion-change.

Events

Event Detail Description
motion-change flipped Fired when a hover, click, key press or flip() turns the card. Not fired when you set flipped. Bubbles and is composed.

Other components also fire a bubbling motion-change. A listener on a parent element should check event.target.

Accessibility

When trigger="click" the host is given role="button", tabindex="0", and responds to Space / Enter. It also gets aria-pressed, which is "true" while the back is showing. Both faces stay in the DOM at all times. The back face is rotated 180° and hidden via backface-visibility, so screen readers can still find its content.