Motion

motion.mp4

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

• tween is the value over time which can be a single value, such as tween(0), or an object tween({ count: 0 })
• reset is a helper function to reset the animation to its default values

Usage

• to method is used to animate values
• sfx method is used to play sounds
• tween and to method accept an options object for duration, delay, and easing
• await keyword can be used to wait for animations to finish

Example

<script>
	import { tween } from '@animotion/motion'

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

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

	async function animate() {
		await camera.sfx(sfx.transition).to({ x: 0, y: 0, w: 10, h: 10 })
		circle.sfx(sfx.transition).to({ x: 10, y: 10, r: 3, fill: '#ffff00' })
		camera.to({ x: 5, y: 5 })
		await text.to({ opacity: 1 }, { duration: 300 })
		text.sfx(sfx.tally).to({ count: 10_000 }, { duration: 600 })
	}
</script>

<svg viewBox="{camera.x} {camera.y} {camera.w} {camera.h}">
	{@render grid()}

	<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"
	>
		{text.count}
	</text>
</svg>

<button onclick={animate}>Animate</button>