moveWhileFocus

Learn more

Add focus animations to inputs, buttons, or cards. The animation plays forward on focus and reverses on blur.

Controls Make it yours

Duration300ms

100ms2000ms

Easingease-out

Reverse Duration 200ms

0ms1000ms

Reverse Easing

demo.htmlhtml

<div
  [moveWhileFocus]="{ scale: [1, 1.05], y: [0, -4] }"
  moveEasing="ease-out"
  moveReverseDuration="200"
  moveReverseEasing="ease-out">
  Target Element
</div>