moveWhileFocus

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

Configuration

Duration300ms

100ms2000ms

Easingease

Reverse Duration 200ms

0ms1000ms

Reverse Easing

Preview Area

demo.htmlhtml

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