Skip to example
Motion
Motion+

Hover

An example of using Motion's hover function in Svelte with an attachment. hover() returns a cleanup function, so it plugs straight into {@attach} and filters out emulated hover events from touch screens.

Matt PerryOctober 9, 2026
Svelte
MotionScore
Open fullscreen

Source code

<script>
  import { animate, hover } from "motion"

  function scaleOnHover(element) {
    return hover(element, () => {
      animate(element, { scale: 1.3 })

      return () => animate(element, { scale: 1 })
    })
  }
</script>

<div class="box" {@attach scaleOnHover}></div>

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: var(--hue-3);
    border-radius: 10px;
  }
</style>