Svelte Animation Driver

Svelte-Animation-Driver

Animation Driver gives you the power to control your animations
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• License
• Contact
• Acknowledgements

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.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Your Name - @jyrki_grohn - jyrki@jyrkigrohn.com

Project Link: https://github.com/grohjy/svelte-animation-driver

Acknowledgements

• Svelte