Transition
Hover me. Transform and shadow ease over 240ms.
CT390 · Week 8 · Animation lab
Four ways to add motion to a React app
Elijah Cruzado. Each demo is a component with its own Storybook story.
CSS
Motion with no library
A transition on hover and a looping @keyframes pulse.
Keyframes
The dot in the corner loops forever with @keyframes.
Reduced motion
Both turn off when the OS asks for reduced motion.
Motion
Animate components and drag
Cards stagger in with variants. Drag the purple card around its box.
- Discover
- Define
- Design
- Deliver
React Three Fiber
3D gears that turn as you scroll
Two meshing gears built from React components. Scroll the page to drive them.
D3
A chart that animates when its data changes
Scales, axes and bars from D3. Shuffle to see the transition.