https://github.com/nikolai-cc/svanim

Animation utillities for svelte/motion stores.
https://github.com/nikolai-cc/svanim

animation keyframes staggered svelte sveltekit

Last synced: 16 days ago
JSON representation

Animation utillities for svelte/motion stores.

• Host: GitHub
• URL: https://github.com/nikolai-cc/svanim
• Owner: nikolai-cc
• Created: 2021-12-07T14:05:17.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-12-07T14:21:14.000Z (over 4 years ago)
• Last Synced: 2025-10-19T07:21:27.322Z (6 months ago)
• Topics: animation, keyframes, staggered, svelte, sveltekit
• Language: JavaScript
• Homepage: https://svanim.vercel.app
• Size: 11.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Svanim

Animation utillities for svelte/motion stores.

### Installation

```

npm i svanim

```

Svelte/motion stores are powerful ways to tween values over time. This is a tiny lib that allows you to pass in an array of store transormations and play them as keyframes or staggered. It will simply loop over the array and play them using setTimeout();

It returns a `play()` function that allows you to manually (re)start the timeline and a `cancel()` function that stops the animation after the current transform is complete.

## Usage

#### Keyframes:

```html

  import { keyframe } from 'svanim'

  import { tweened } from 'svelte/motion'

  let width = tweened(100)

  let frames = [{

      { s: width, to: 100, time: 0 }

      { s: width, to: 1000, time: 1000 }

      { s: width, to: 500, time: 3000 }

  }]

  let tl = timeline(frames, { autoplay: false, direction: 'alternate', loop: true });

I will be changing my width.


Start looping through the keyframes

```

#### Staggered:

```html

  import { stagger } from 'svanim'

  import { tweened } from 'svelte/motion'

  let one = tweened(100)

  let two = tweened(100)

  let three = tweened(100)

  let frames = [{

      { s: one, to: 500 }

      { s: two, to: 500 }

      { s: three, to: 500 }

  }]

  let st = stagger(frames, { autoplay: false, delay: 250 })

I am first


I am second


I am third


Start staggered animation

```