moveVariants

Learn more

Define multiple animation states and transition between them. Perfect for interactive components with multiple states.

idle

Click buttons to transition between animation states

Controls Make it yours

Duration300ms

100ms2000ms

Easingspring

demo.htmlhtml

<div [moveVariants]="{ idle: { scale: 1, rotate: 0 }, hover: { scale: 1.1, rotate: 5 }, active: { scale: 0.95, rotate: -5 } }" moveDuration="300ms" moveEasing="spring" [moveVariant]="'idle'">
  Target Element
</div>