Advanced · plugin: Flip

FLIP layout transitions

Filter the grid and the reflow is FLIP-animated. The whole trick is ordering: capture the layout before the signal changes the DOM, animate after Angular renders. Those are exactly the two moments this library hands you.

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>
}

How this works

Flip needs two snapshots: the layout before the change and after. Flip.getState() runs in the click handler, before the signal updates. The callback runs after Angular renders, so Flip.from() measures the new layout. That ordering is the hard part, and it falls out of how injectGsap works.
track card.id keeps the DOM nodes of surviving cards, so Flip matches them by identity. data-flip-id covers the ones that enter.
Click filters as fast as you want; each re-run reverts the previous one first.