https://github.com/animotionjs/motion

🔥 Svelte animation library
https://github.com/animotionjs/motion

animation library motion svelte sveltekit

Last synced: 1 day ago
JSON representation

🔥 Svelte animation library

• Host: GitHub
• URL: https://github.com/animotionjs/motion
• Owner: animotionjs
• License: mit
• Created: 2023-11-09T13:23:27.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-17T08:27:00.000Z (4 months ago)
• Last Synced: 2024-10-30T00:05:17.633Z (2 months ago)
• Topics: animation, library, motion, svelte, sveltekit
• Language: TypeScript
• Homepage:
• Size: 159 KB
• Stars: 38
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), it uses values that change over time, to animate any property.

## Installation

```sh

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

```svelte

	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 })

	}

	{@render grid()}

	

	

		{text.count}

	

Animate

```