Sequential Logic

Choreographing time and state. This laboratory explores the structural logic of multi-step animations, layering temporal offsets to sculpt expressive motion beats and story-driven interactions.

Lab 5 - Zig Zag Animation

Create a zigzag animation for a box moving across the screen.

Create a square box using motion.div.
Use keyframes to animate the box in a zigzag pattern horizontally.
Style the box with Tailwind CSS.