Motion

https://github.com/animotionjs/motion/assets/38083522/7cd87b1b-016f-46d3-b2c9-67e849d4559f

What Is Motion?

Motion is a simple Svelte animation library. Instead of being limited to animating CSS properties using a JavaScript animation library, or the Web Animations API, it uses values that change over time, to animate any property.

Installation

npm i @animotion/motion

Methods

• animate is an onMount wrapper, but you can use any async function to define the animation
• signal is the value over time which can be a single value, such as signal(0), or an object signal({ count: 0 })
• all is a helper function used to play animations at the same time (you can use await in front of it)
• reset is a helper function to reset the animation to its default values

Usage

• To start an animation use the await keyword
• Use to on a signal to animate values, and sfx to play sounds
• to and sfx are chainable
• signal and to accept an options object for duration, delay, and easing

Example

You can try the example in SvelteLab.

<script lang="ts">
  import { animate, signal, all } from '@animotion/motion'
  import { formatNumber } from '$lib/utils'

  const sfx = {
    transition: 'sfx/transition.mp3',
    tally: 'sfx/tally.mp3',
  }

  const svg = signal({ x: -2, y: -2, w: 24, h: 24 })
  const circle = signal({ x: 2.5, y: 2.5, r: 1.5, fill: '#00ffff' })
  const text = signal({ count: 0, opacity: 0 })

  animate(async () => {
    await svg.sfx(sfx.transition).to({ x: 0, y: 0, w: 10, h: 10 })

    all(
      circle.sfx(sfx.transition).to({ x: 10, y: 10, r: 3, fill: '#ffff00' }),
      svg.to({ x: 5, y: 5 })
    )

    await text
      .to({ opacity: 1 }, { duration: 300 })
      .sfx(sfx.tally)
      .to({ count: 10_000 }, { duration: 600 })
  })
</script>

<svg viewBox="{$svg.x} {$svg.y} {$svg.w} {$svg.h}">
  <circle cx={$circle.x} cy={$circle.y} r={$circle.r} fill={$circle.fill} />

  <text
    x={$circle.x}
    y={$circle.y}
    font-size={$circle.r * 0.4}
    opacity={$text.opacity}
    text-anchor="middle"
    dominant-baseline="middle"
    fill="#000"
  >
    {formatNumber($text.count)}
  </text>
</svg>