Tactile Interactions

Deciphering the language of touch and intent. This laboratory investigates how interfaces respond to human input, from the subtlety of a hover to the physics-based feedback of a drag interaction.

Lab 1 - Swipeable Cards

Create cards that can be swiped left or right to the next card.

  • Create a motion.div to represent the card.
  • Use drag, dragConstraints, and onDragEnd to swipe through cards.
  • Animate the card' position based on the swipe.

No.1

Type: Fruit

No.2

Type: Meat

No.3

Type: Veggie