Most animations in software are loud, distracting, and add unnecessary delay. They slide elements over long distances, bounce panels aggressively, and call attention to themselves. We believe micro-animations shouldn't be decorative; they should be informational.
"Animations are like seasonings: a tiny pinch highlights the texture, while a handful ruins the dish."
At Maple, we designed our transitions to emulate physical materials moving under tension. By utilizing spring physics models instead of standard cubic-bezier curves, we mimic realistic physical attributes, helping the human brain keep track of context swaps without feeling fatigue.
Cubic-Bezier vs. Spring Physics
| Transition Paradigm | Visual feel | Cognitive Strain |
|---|---|---|
| Standard Linear Easing | Mechanical, rigid, unnatural | Moderate (Unnatural motion) |
| Saturated Cubic-Bezier | Snappy, clean digital motion | Low (Standard digital experience) |
| Spring Physics Model | Organic, fluid, responsive | Minimal (Mimics real-world movement) |
CSS Spring-like Easing Curve
/* Muted natural spring easing for overlay summons */
.hud-summons-animate {
animation: spring-pop 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}
@keyframes spring-pop {
0% {
transform: scale(0.96) translate3d(0, 8px, 0);
opacity: 0;
}
100% {
transform: scale(1) translate3d(0, 0, 0);
opacity: 1;
}
}