# Rule: Use Appropriate Easing for Motion Design
| UI element entrances | `ease_out` or `ease_out_cubic` |
| Element exits | `ease_in` or `ease_in_cubic` |
| Continuous/looping | `linear` |
| Playful bouncy motion | `spring` with `{ "damping": 15, "stiffness": 100, "mass": 1 }` |
| Counter number animation | `ease_out` |
| Camera-like zoom | `ease_in_out` |
| Smooth subtle reveals | `spring` with `{ "damping": 200 }` |
Entrance presets already use appropriate easing internally.
## Available Easing Functions
17 named easings, plus `cubic_bezier` for a custom curve — 18 total:
`linear`, `ease_in`, `ease_out`, `ease_in_out`, `ease_in_quad`, `ease_out_quad`, `ease_in_cubic`, `ease_out_cubic`, `ease_in_expo`, `ease_out_expo`, `ease_in_out_quad`, `ease_in_out_expo`, `ease_in_back`, `ease_out_back`, `ease_out_elastic`, `bounce`, `spring`
`cubic_bezier` takes a parameter object instead of a bare string — `{ "cubic_bezier": { "x1": 0.4, "y1": 0.0, "x2": 0.2, "y2": 1.0 } }` — anywhere an `easing` value is accepted (top-level `animation.easing`, per-keyframe `easing`).
### Spring Physics
When easing is `spring`, configure with:
```json
{
"easing": "spring",
"spring": { "damping": 15, "stiffness": 100, "mass": 1 }
}
```
**Tout preset accepte `spring`.** Ajouter un objet `spring` à n'importe quel preset applique la physique de ressort à ses keyframes de mouvement (translate/scale/rotate) — l'opacity garde son ease (pas de flash d'alpha en overshoot) :
```json
{ "name": "fade_in_up", "duration": 0.8, "spring": { "damping": 8, "stiffness": 120 } }
```
- `bounce_in` / `elastic_in` : leurs springs intégrés sont les défauts ; un `spring` utilisateur les remplace.
- `scale_in` + spring : l'overshoot manuel est remplacé par celui du ressort.
- Oscillateurs continus (`pulse`, `shake`, `float`) : non affectés (leur forme est leur raison d'être).
- La `duration` reste la fenêtre de l'animation : le ressort est résolu en secondes réelles dans cette fenêtre et la valeur se cale sur la cible à la fin — choisir une duration suffisante (≥ 0.6s avec les défauts) pour laisser le ressort converger.
- Dialecte HTML : la DSL compacte accepte `spring:true` (défauts damping 15 / stiffness 100 / mass 1) ; la config fine passe par la forme JSON de `anim`.