Motion
How Many moves: the logo, the timing and the animations we make.
Logo animation
The HugLetters rise in turn. The y arrives folded in and opens out as it lands. Used on the app’s first screen.
Motion
Springcubic-bezier(.34, 1.56, .64, 1)Picks, cards and buttons overshoot slightly, like the logo.
Softcubic-bezier(.2, .8, .2, 1)Screen changes and fades. No overshoot.
180ms420ms700ms
DurationsPress feedback, screen change, content rising in.
Interaction studies
Small moments of motion inside the app. Files dropped into public/animations appear here as they’re made.
Planned
Card flip
01Card flip
Planned
Choice pick
02Choice pick
Planned
Progress between choices
03Progress between choices
Planned
Screen change
04Screen change
Planned
Number counting up
05Number counting up
Planned
Success moment
06Success moment