Design Systems

A collection of minimal, black & white interactive UI animations by Tayo Adedigba.

Number Counter

Framer Motion
0
1
2
3
4
5
6
7
8
9

Cart Quantity Selector

Framer Motion
0
1
2
3
4
5
6
7
8
9

Try crossing the 9 -> 10 boundary to see layout expansion

Success Animation

State Transition

Processing

Maira and Co

0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
,
0
1
2
3
4
5
6
7
8
9

Waiting to begin processing your
payment transaction.

Auto-cycling green radial bloom with checkmark path-draw animation.

Morphing Action Pill

Layout Morphing
Grid Variant
List Variant

Sleek FAB List

Staggered Pop-up
Pos: Bottom
Pos: Top

Top-Down Toast

Spring Entrance

Now with multiple statuses and robust function-based triggers!

Back Button

Magnetic Parallax
Go Back

Hover near the button to feel the Apple-style magnetic spring effect.

Responsive Modal

Adaptive Sheet

Centered dialog on desktop, swipeable bottom sheet on mobile.