Svelte-animation-driver NPM

About The Project

I needed to run multiple animations together and control the running. I couldn't find the easy way to do it with Svelte, so I created this helper package: Animation Driver.
This package doesn't animate anything by itself, but it'll give you a way to manipulate t-value, which can be used to run animations.

Animation Driver gives you these:

Run multiple animations together
Control animations playhead ie. stop animation, jump to different position, reverse
Loop animation, run it back and fort
Control speed and running direction
Manipulate sub-animations with helper functions
- run only certain slice of animation
- run animation in step-mode
- repeat animation multiple time during original duration
- run sub-animation back-and-fort
A couple of handy functions
- mapRange = fit t-value 0->1 to any range you need
- u = reverse t-value

More info in Getting Started and Examples sections.

Built With

Svelte

Getting Started

This addon works with Svelte, so you should be familiar with svelte.

Prerequisites

Install first vscode-editor and npm or yarn package manager. You can also install Svelte starter template

yarn

npm install -g yarn

Svelte starter template

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
yarn
yarn dev

Installation

Install Animation Driver

yarn add svelte-animation-driver

Import Animation Driver to your component-file (for ex. App.svelte)

import { animationDriver } from 'svelte-animation-driver'

Usage

Minimal setup is following: App.svelte

<script>
import { animationDriver } from 'svelte-animation-driver'
const drv = animationDriver()
let x
new drv.addAnimation(0, 3000, (t) => x=t)
drv.play()
</script>
    
<div 
  style="background-color:pink;
    width:{x*100 + 250}px;"
>
    t-value:{x}
</div>

Let's breakdown each line:
Initialize drv with imported animationDriver
Create reactive variable x
Add new sub-animation to drv with delay = 0 and duration = 3s, the last argument is a callback function that will run everytime t-value is changed. Set x = t in callback in order to keep x updated.
Start animations by drv.play()

Make div with pink background and with width initially 250px. Add text to div.

When animation runs it updates x and the width increases gradually to 350px and text says t-value: with number running from 0 to 1.

You can find example projects from Animation Driver's Github page

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.