Avanzado · plugin: Flip

Transiciones de layout con FLIP

Filtra la cuadrícula y el reacomodo se anima con FLIP. Todo el truco es el orden: capturar el layout antes de que el signal cambie el DOM, animar después de que Angular pinte. Esos son exactamente los dos momentos que esta librería te entrega.

injectGsapFlip@for track

injectGsap

ScrollTrigger

contextSafe

SplitText

provideGsap

Flip

reveal

MorphSVG

@for (card of cards(); track card.id) {
  <div class="flip-card"
    [attr.data-flip-id]="card.id">
    {{ card.label }}
  </div>
}

@for (t of tags; track t) {
  <button (click)="setFilter(t)">{{ t }}</button>
}

Cómo funciona

Flip necesita dos instantáneas: el layout antes del cambio y después. Flip.getState() corre en el handler del click, antes de que el signal se actualice. El callback corre después de que Angular pinta, así que Flip.from() mide el layout nuevo. Ese orden es la parte difícil, y sale gratis de cómo funciona injectGsap.
track card.id conserva los nodos del DOM de las tarjetas que sobreviven, así Flip las empareja por identidad. data-flip-id cubre las que entran.
Filtra tan rápido como quieras; cada re-ejecución revierte la anterior primero.