lab Home
08

Flip layout — grille qui se réorganise en douceur

GSAP / Flip

Chargement de la démo…

Basculez entre grille et liste, ou filtrez les projets.

Filtrer ou changer d’affichage sans saut brutal : vos réalisations glissent à leur nouvelle place.

Intensité
Performance
Léger
Mobile
Fonctionne tel quel.
Accessibilité
Changement d’affichage instantané.
Idéal pour
PortfolioE-commerceImmobilierCatalogue produits

Featured :

  1. 1.Capture de l’état avant le changement : const state = Flip.getState(items)
  2. 2.On change le DOM (classe de layout, filtre), on attend Vue avec await nextTick()
  3. 3.Puis : Flip.from(state, { duration: 0.7, ease: 'power3.inOut', absolute: true, stagger: 0.03 })
  4. 4.Les éléments filtrés sortent via onLeave et reviennent via onEnter (fondu + scale)
Next