MOTION LAB / Experimental
moveLayout
Learn more
Animate layout changes smoothly. Elements animate from where they were painted to where application state now puts them — also when another change interrupts the animation, and across two different elements that share a moveLayoutId.
A
B
C
D
E
F
Controls Make it yours
400ms
100ms2000ms
Easingease-out
<button (click)="list.set(!list())">Grid / list</button>
<div [style.display]="list() ? 'flex' : 'grid'" style="gap: 8px; flex-direction: column">
@for (item of items(); track item.id) {
<div moveLayout moveDuration="400ms" moveEasing="ease-out">{{ item.label }}</div>
}
</div>