Feature 07 — FLIP Animation

Marché
artisanal

Filtrez par catégorie — les cartes restantes glissent fluidement vers leur nouvelle position. C'est la technique FLIP : First, Last, Invert, Play.

Céramique
Bol à thé
48 €
Textile
Foulard lin
85 €
Bois
Planche à découper
62 €
Métal
Bougeoir forgé
110 €
Céramique
Vase torsadé
95 €
Bois
Cuillère sculptée
38 €
Textile
Coussin tissé
72 €
Métal
Lampe découpée
240 €
Céramique
Assiettes (×4)
120 €
Bois
Boite à thé
55 €
Textile
Panier tressé
88 €
Métal
Miroir cerclé
195 €

Chaque carte
connaît sa place

FLIP est une technique de performance pour animer des réorganisations de DOM. Le navigateur calcule la différence de position avant/après et la joue en CSS transform — bien plus performant qu'animer top/left directement.

Usages : filtres de catalogue, tri de liste, réorganisation de galerie, panier e-commerce.

Les 4 étapes

F First — Capturer les positions actuelles via getBoundingClientRect()
L Last — Appliquer le filtre, recapturer les nouvelles positions
I Invert — Appliquer le delta inversé comme transform initial
P Play — Animer vers transform: none via CSS transition