shoelace/docs/components/animation.md

Animate

[component-header:sl-animate]

Animate elements declaratively using the Web Animations API. Select from over 500 baked-in presets or roll your own with custom keyframe formats.

<sl-animation
  name="bounce"
  easing="ease-in-out"
  duration="2000"
  delay="300"
  iterations="Infinity"
  autoplay
>
  <div style="width: 100px; height: 100px; background-color: var(--sl-color-primary-50);"></div>
</sl-animation>

<br>

<sl-select value="bounce"></sl-select>

<script>
  const animations = ['none', 'bounce', 'flash', 'jello', 'pulse', 'rotate', 'shake', 'swing', 'rubberBand', 'tada', 'wobble', 'heartBeat', 'bounceIn', 'bounceInUp', 'bounceInDown', 'bounceOut', 'bounceOutUp', 'bounceOutDown', 'bounceOutRight', 'bounceOutLeft', 'fadeIn', 'fadeInUp', 'fadeInUpBig', 'fadeInDown', 'fadeInDownBig', 'fadeInRightBig', 'fadeInLeftBig', 'fadeOut', 'fadeOutUp', 'fadeOutUpBig', 'fadeOutDown', 'fadeOutDownBig', 'fadeOutRight', 'fadeOutRightBig', 'fadeOutLeft', 'fadeOutLeftBig', 'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY', 'lightSpeedIn', 'lightSpeedOut', 'rotateIn', 'rotateInClockwise', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutClockwise', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'slideInUp', 'slideInDown', 'slideOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight', 'zoomOut', 'zoomOutUp', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'hinge', 'jackInTheBox', 'rollIn', 'rollOut', 'scale-up-center', 'scale-up-top', 'scale-up-tr', 'scale-up-right', 'scale-up-br', 'scale-up-bottom', 'scale-up-bl', 'scale-up-left', 'scale-up-tl', 'scale-up-hor-center', 'scale-up-hor-left', 'scale-up-hor-right', 'scale-up-ver-center', 'scale-up-ver-top', 'scale-up-ver-bottom', 'scale-down-center', 'scale-down-top', 'scale-down-tr', 'scale-down-right', 'scale-down-br', 'scale-down-bottom', 'scale-down-bl', 'scale-down-left', 'scale-down-tl', 'scale-down-hor-center', 'scale-down-hor-left', 'scale-down-hor-right', 'scale-down-ver-center', 'scale-down-ver-top', 'scale-down-ver-bottom', 'rotate-center', 'rotate-top', 'rotate-tr', 'rotate-right', 'rotate-br', 'rotate-bottom', 'rotate-bl', 'rotate-left', 'rotate-tl', 'rotate-hor-center', 'rotate-hor-top', 'rotate-hor-bottom', 'rotate-vert-center', 'rotate-vert-left', 'rotate-vert-right', 'rotate-diagonal-1', 'rotate-diagonal-2', 'rotate-diagonal-tr', 'rotate-diagonal-br', 'rotate-diagonal-bl', 'rotate-diagonal-tl', 'rotate-scale-up', 'rotate-scale-down', 'rotate-scale-up-hor', 'rotate-scale-down-hor', 'rotate-scale-up-ver', 'rotate-scale-down-ver', 'rotate-scale-up-diag-1', 'rotate-scale-down-diag-1', 'rotate-scale-up-diag-2', 'rotate-scale-down-diag-2', 'rotate-90-cw', 'rotate-90-ccw', 'rotate-90-top-cw', 'rotate-90-top-ccw', 'rotate-90-tr-cw', 'rotate-90-tr-ccw', 'rotate-90-right-cw', 'rotate-90-right-ccw', 'rotate-90-br-cw', 'rotate-90-br-ccw', 'rotate-90-bottom-cw', 'rotate-90-bottom-ccw', 'rotate-90-bl-cw', 'rotate-90-bl-ccw', 'rotate-90-left-cw', 'rotate-90-left-ccw', 'rotate-90-tl-cw', 'rotate-90-tl-ccw', 'rotate-90-horizontal-fwd', 'rotate-90-horizontal-bck', 'rotate-90-vertical-fwd', 'rotate-90-vertical-bck', 'flip-horizontal-bottom', 'flip-horizontal-top', 'flip-horizontal-bck', 'flip-horizontal-fwd', 'flip-vertical-right', 'flip-vertical-left', 'flip-vertical-bck', 'flip-vertical-fwd', 'flip-diagonal-1-tr', 'flip-diagonal-1-bl', 'flip-diagonal-1-bck', 'flip-diagonal-1-fwd', 'flip-diagonal-2-br', 'flip-diagonal-2-tl', 'flip-diagonal-2-bck', 'flip-diagonal-2-fwd', 'flip-2-hor-top-1', 'flip-2-hor-top-2', 'flip-2-hor-top-bck', 'flip-2-hor-top-fwd', 'flip-2-ver-right-1', 'flip-2-ver-right-2', 'flip-2-ver-right-bck', 'flip-2-ver-right-fwd', 'flip-2-hor-bottom-1', 'flip-2-hor-bottom-2', 'flip-2-hor-bottom-bck', 'flip-2-hor-bottom-fwd', 'flip-2-ver-left-1', 'flip-2-ver-left-2', 'flip-2-ver-left-bck', 'flip-2-ver-left-fwd', 'flip-scale-up-hor', 'flip-scale-down-hor', 'flip-scale-up-ver', 'flip-scale-down-ver', 'flip-scale-up-diag-1', 'flip-scale-down-diag-1', 'flip-scale-up-diag-2', 'flip-scale-down-diag-2', 'flip-scale-2-hor-top', 'flip-scale-2-ver-right', 'flip-scale-2-hor-bottom', 'flip-scale-2-ver-left', 'swing-top-fwd', 'swing-top-bck', 'swing-top-right-fwd', 'swing-top-right-bck', 'swing-right-fwd', 'swing-right-bck', 'swing-bottom-right-fwd', 'swing-bottom-right-bck', 'swing-bottom-fwd', 'swing-bottom-bck', 'swing-bottom-left-fwd', 'swing-bottom-left-bck', 'swing-left-fwd', 'swing-left-bck', 'swing-top-left-fwd', 'swing-top-left-bck', 'slide-top', 'slide-tr', 'slide-right', 'slide-br', 'slide-bottom', 'slide-bl', 'slide-left', 'slide-tl', 'slide-bck-center', 'slide-bck-top', 'slide-bck-tr', 'slide-bck-right', 'slide-bck-br', 'slide-bck-bottom', 'slide-bck-bl', 'slide-bck-left', 'slide-bck-tl', 'slide-fwd-center', 'slide-fwd-top', 'slide-fwd-tr', 'slide-fwd-right', 'slide-fwd-br', 'slide-fwd-bottom', 'slide-fwd-bl', 'slide-fwd-left', 'slide-fwd-tl', 'slide-rotate-hor-top', 'slide-rotate-hor-t-bck', 'slide-rotate-hor-t-fwd', 'slide-rotate-ver-right', 'slide-rotate-ver-r-bck', 'slide-rotate-ver-r-fwd', 'slide-rotate-hor-bottom', 'slide-rotate-hor-b-bck', 'slide-rotate-hor-b-fwd', 'slide-rotate-ver-left', 'slide-rotate-ver-l-bck', 'slide-rotate-ver-l-fwd', 'shadow-drop-center', 'shadow-drop-top', 'shadow-drop-right', 'shadow-drop-bottom', 'shadow-drop-left', 'shadow-drop-lr', 'shadow-drop-tb', 'shadow-drop-tr', 'shadow-drop-br', 'shadow-drop-bl', 'shadow-drop-tl', 'shadow-drop-2-center', 'shadow-drop-2-top', 'shadow-drop-2-right', 'shadow-drop-2-bottom', 'shadow-drop-2-left', 'shadow-drop-2-lr', 'shadow-drop-2-tb', 'shadow-drop-2-tr', 'shadow-drop-2-br', 'shadow-drop-2-bl', 'shadow-drop-2-tl', 'shadow-pop-tr', 'shadow-pop-br', 'shadow-pop-bl', 'shadow-pop-tl', 'shadow-inset-center', 'shadow-inset-top', 'shadow-inset-right', 'shadow-inset-bottom', 'shadow-inset-left', 'shadow-inset-lr', 'shadow-inset-tb', 'shadow-inset-tr', 'shadow-inset-br', 'shadow-inset-bl', 'shadow-inset-tl', 'scale-in-center', 'scale-in-top', 'scale-in-tr', 'scale-in-right', 'scale-in-br', 'scale-in-bottom', 'scale-in-bl', 'scale-in-left', 'scale-in-tl', 'scale-in-hor-center', 'scale-in-hor-left', 'scale-in-hor-right', 'scale-in-ver-center', 'scale-in-ver-top', 'scale-in-ver-bottom', 'rotate-in-center', 'rotate-in-top', 'rotate-in-tr', 'rotate-in-right', 'rotate-in-br', 'rotate-in-bottom', 'rotate-in-bl', 'rotate-in-left', 'rotate-in-tl', 'rotate-in-hor', 'rotate-in-ver', 'rotate-in-diag-1', 'rotate-in-diag-2', 'rotate-in-2-cw', 'rotate-in-2-ccw', 'rotate-in-2-fwd-cw', 'rotate-in-2-fwd-ccw', 'rotate-in-2-bck-cw', 'rotate-in-2-bck-ccw', 'rotate-in-2-tr-cw', 'rotate-in-2-tr-ccw', 'rotate-in-2-br-cw', 'rotate-in-2-br-ccw', 'rotate-in-2-bl-cw', 'rotate-in-2-bl-ccw', 'rotate-in-2-tl-cw', 'rotate-in-2-tl-ccw', 'swirl-in-fwd', 'swirl-in-bck', 'swirl-in-top-fwd', 'swirl-in-top-bck', 'swirl-in-tr-fwd', 'swirl-in-tr-bck', 'swirl-in-right-fwd', 'swirl-in-right-bck', 'swirl-in-br-fwd', 'swirl-in-br-bck', 'swirl-in-bottom-fwd', 'swirl-in-bottom-bck', 'swirl-in-bl-fwd', 'swirl-in-bl-bck', 'swirl-in-left-fwd', 'swirl-in-left-bck', 'swirl-in-tl-fwd', 'swirl-in-tl-bck', 'flip-in-hor-bottom', 'flip-in-hor-top', 'flip-in-ver-right', 'flip-in-ver-left', 'flip-in-diag-1-tr', 'flip-in-diag-1-bl', 'flip-in-diag-2-tl', 'flip-in-diag-2-br', 'slit-in-vertical', 'slit-in-horizontal', 'slit-in-diagonal-1', 'slit-in-diagonal-2', 'slide-in-top', 'slide-in-tr', 'slide-in-right', 'slide-in-br', 'slide-in-bottom', 'slide-in-bl', 'slide-in-left', 'slide-in-tl', 'slide-in-fwd-center', 'slide-in-fwd-top', 'slide-in-fwd-tr', 'slide-in-fwd-right', 'slide-in-fwd-br', 'slide-in-fwd-bottom', 'slide-in-fwd-bl', 'slide-in-fwd-left', 'slide-in-fwd-tl', 'slide-in-bck-center', 'slide-in-bck-top', 'slide-in-bck-tr', 'slide-in-bck-right', 'slide-in-bck-br', 'slide-in-bck-bottom', 'slide-in-bck-bl', 'slide-in-bck-left', 'slide-in-bck-tl', 'slide-in-blurred-top', 'slide-in-blurred-tr', 'slide-in-blurred-right', 'slide-in-blurred-br', 'slide-in-blurred-bottom', 'slide-in-blurred-bl', 'slide-in-blurred-left', 'slide-in-blurred-tl', 'slide-in-elliptic-top-fwd', 'slide-in-elliptic-top-bck', 'slide-in-elliptic-right-fwd', 'slide-in-elliptic-right-bck', 'slide-in-elliptic-bottom-fwd', 'slide-in-elliptic-bottom-bck', 'slide-in-elliptic-left-fwd', 'slide-in-elliptic-left-bck', 'bounce-in-top', 'bounce-in-right', 'bounce-in-bottom', 'bounce-in-left', 'bounce-in-fwd', 'bounce-in-bck', 'roll-in-left', 'roll-in-top', 'roll-in-right', 'roll-in-bottom', 'roll-in-blurred-left', 'roll-in-blurred-top', 'roll-in-blurred-right', 'roll-in-blurred-bottom', 'tilt-in-top-1', 'tilt-in-top-2', 'tilt-in-tr', 'tilt-in-right-1', 'tilt-in-right-2', 'tilt-in-br', 'tilt-in-bottom-1', 'tilt-in-bottom-2', 'tilt-in-bl', 'tilt-in-left-1', 'tilt-in-left-2', 'tilt-in-tl', 'tilt-in-fwd-tr', 'tilt-in-fwd-br', 'tilt-in-fwd-bl', 'tilt-in-fwd-tl', 'swing-in-top-fwd', 'swing-in-top-bck', 'swing-in-right-fwd', 'swing-in-right-bck', 'swing-in-bottom-fwd', 'swing-in-bottom-bck', 'swing-in-left-fwd', 'swing-in-left-bck', 'fade-in-fwd', 'fade-in-bck', 'fade-in-top', 'fade-in-tr', 'fade-in-right', 'fade-in-br', 'fade-in-bottom', 'fade-in-bl', 'fade-in-left', 'fade-in-tl', 'puff-in-center', 'puff-in-top', 'puff-in-tr', 'puff-in-right', 'puff-in-br', 'puff-in-bottom', 'puff-in-bl', 'puff-in-left', 'puff-in-tl', 'puff-in-hor', 'puff-in-ver', 'flicker-in-1', 'flicker-in-2', 'tracking-in-expand', 'tracking-in-expand-fwd', 'tracking-in-expand-fwd-top', 'tracking-in-expand-fwd-bottom', 'tracking-in-contract', 'tracking-in-contract-bck', 'tracking-in-contract-bck-top', 'tracking-in-contract-bck-bottom', 'text-focus-in', 'focus-in-expand', 'focus-in-expand-fwd', 'focus-in-contract', 'focus-in-contract-bck', 'text-shadow-drop-center', 'text-shadow-drop-top', 'text-shadow-drop-tr', 'text-shadow-drop-right', 'text-shadow-drop-br', 'text-shadow-drop-bottom', 'text-shadow-drop-bl', 'text-shadow-drop-left', 'text-shadow-drop-tl', 'text-shadow-pop-top', 'text-shadow-pop-tr', 'text-shadow-pop-right', 'text-shadow-pop-br', 'text-shadow-pop-bottom', 'text-shadow-pop-bl', 'text-shadow-pop-left', 'text-shadow-pop-tl', 'text-pop-up-top', 'text-pop-up-tr', 'text-pop-up-right', 'text-pop-up-br', 'text-pop-up-bottom', 'text-pop-up-bl', 'text-pop-up-left', 'text-pop-up-tl', 'vibrate-1', 'vibrate-2', 'shake-horizontal', 'shake-vertical', 'shake-lr', 'shake-top', 'shake-tr', 'shake-right', 'shake-br', 'shake-bottom', 'shake-bl', 'shake-left', 'shake-tl', 'jello-horizontal', 'jello-vertical', 'jello-diagonal-1', 'jello-diagonal-2', 'wobble-hor-bottom', 'wobble-hor-top', 'wobble-ver-left', 'wobble-ver-right', 'bounce-top', 'bounce-bottom', 'bounce-left', 'bounce-right', 'pulsate-bck', 'pulsate-fwd', 'ping', 'ken-burns-top', 'ken-burns-top-right', 'ken-burns-right', 'ken-burns-bottom-right', 'ken-burns-bottom', 'ken-burns-bottom-left', 'ken-burns-left', 'ken-burns-top-left', 'bg-pan-left', 'bg-pan-right', 'bg-pan-top', 'bg-pan-bottom', 'bg-pan-tr', 'bg-pan-br', 'bg-pan-bl', 'bg-pan-tl'];
  const animation = document.querySelector('sl-animation');
  const select = document.querySelector('sl-select');

  animations.map(name => {
    const menuItem = Object.assign(document.createElement('sl-menu-item'), {
      textContent: name,
      value: name
    });
    select.appendChild(menuItem);
  });

  select.addEventListener('slChange', () => animation.name = select.value);
</script>

Examples

[component-metadata:sl-animate]