Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nitin42/Animated-Timeline
🔥 Create timeline and playback based animations in React
https://github.com/nitin42/Animated-Timeline
animations bezier graphics playback react timeline web
Last synced: 3 months ago
JSON representation
🔥 Create timeline and playback based animations in React
- Host: GitHub
- URL: https://github.com/nitin42/Animated-Timeline
- Owner: nitin42
- Created: 2018-03-19T15:33:03.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-05-07T07:44:19.000Z (over 6 years ago)
- Last Synced: 2024-04-23T20:12:10.688Z (6 months ago)
- Topics: animations, bezier, graphics, playback, react, timeline, web
- Language: JavaScript
- Size: 21.6 MB
- Stars: 195
- Watchers: 10
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-list - Animated-Timeline
README
# Animated Timeline
  [](https://travis-ci.org/nitin42/Timeline)
> Create playback based animations in React
## Table of contents
* [Introduction](#introduction)
* [Another animation library ?](#another-animation-library)
* [Features](#features)
* [Performance](#performance)
* [Install](#install)
* [Browser support](#browser-support)
* [Usage](#usage)
* [Animation types](#animation-types)
* [Animation values](#animation-values)
* [Documentation](#documentation)
* [Todos](#todos)
## Introduction
**animated-timeline** is an animation library (not really) for React which makes it painless to create playback based animations.
## Another animation library ?
Nope! Though you can use it as a library. The main goal of this project is to provide -
* utilities to create animation tools
* low-level APIs to create a fitting abstraction on top of this project
* APIs for composing animations that transition from one state to another, use loops, callbacks and timer APIs to create interactive animations
## Concepts
`animated-timeline` works on two models, timing and animation model.
### Timing model
Timing model manages the time and keeps track of current progress in a timeline.
### Animation model
Animation model, on the other hand, describes how an animation could look like at any give time or it can be thought of as state of an animation at a particular point of time.
Using both the models, we can synchronize the timing and visual changes to the document.
## Features
* Controls for time-based execution of an animation
* Create sequence based animations
* Timing based animations
* Change the animation position along the timeline by seeking the animation
* Keyframes
* Promise based APIs
* Interactive animations based on changing inputs
* Spring physics and bounciness
## Performance
Style mutations and style reads are batched internally to speed up the performance and avoid document reflows.
## Install
```
npm install animated-timeline
```
or if you use yarn
```
yarn add animated-timeline
```
**This project also depends on `react` and `react-dom` so make sure you've them installed.**
## Browser support
| Chrome | Safari | IE / EDGE | Firefox | Opera |
| ------ | :----: | --------: | ------: | ----: |
| 24+ | 6+ | 10+ | 32+ | 15+ |
## Usage
`animated-timeline` provides three ways to do animations:
* [Component API](./docs/Component.md)
* [Timeline API](./docs/Timeline.md)
* [Spring physics API](./docs/Spring.md)
**Example usage with component API**
```js
import React from 'react'
import { Animate, helpers } from 'animated-timeline'
const styles = {
width: '20px',
height: '20px',
backgroundColor: 'pink'
}
// Properties for timing model
const timingProps = {
duration: 1000
}
// Properties for animation model
const animationProps = {
rotate: helpers.transition({ from: 360, to: 180 })
}
function App() {
return (
)
}
```
[Read the detailed API reference for Component API](./docs/Component.md)
**Example usage with `Timeline` API**
```js
import React from 'react'
import { createTimeline, helpers } from 'animated-timeline'
const styles = {
width: '20px',
height: '20px',
backgroundColor: 'pink'
}
const t = createTimeline({
direction: 'alternate',
iterations: 1
})
class App extends React.Component {
componentDidMount() {
t
.animate({
opacity: helpers.transition({ from: 0.2, to: 0.8 }),
rotate: helpers.transition({ from: 360, to: 180 })
})
.start()
}
render() {
return
}
}
```
[Read the detailed API reference for `Timeline` API](./docs/Timeline.md)
**Example usage with spring physics**
```js
import React from 'react'
import { Spring } from 'animated-timeline'
const styles = {
width: '20px',
height: '20px',
backgroundColor: 'pink'
}
const s = Spring({ friction: 4, tension: 2 })
// or
// const s = Spring({ bounciness: 14, speed: 12 })
class SpringSystem extends React.Component {
componentDidMount() {
s.animate({
property: 'scale',
map: {
inputRange: [0, 1],
outputRange: [1, 1.5]
}
})
}
render() {
return (
s.setValue(0)}
onMouseDown={() => s.setValue(1)}
style={styles}
/>
)
}
}
```
[Read the detailed API reference for spring physics](./docs/Spring.md)
## Animation types
### Sequence based animations
[](https://codesandbox.io/s/6j08xylw7n)
### Timing based animations
[](https://codesandbox.io/s/92lm0xrl44)
### Staggered animation
[](https://codesandbox.io/s/743n1z9826)
### Keyframes
[](https://codesandbox.io/s/92lm0xrl44)
### Changing the animation position
You can also change the animation position along its timeline with an input value.
[](https://codesandbox.io/s/kkjn9jq6k7)
### Spring based animations
[](https://codesandbox.io/s/75l1z6jzq)
### More examples
* [Using animation lifecycle hooks](./examples/Lifecycle/index.js)
* [Using promise based APIs to manage `completion` and `cancellation` events for an animation](./examples/Promise/index.js)
* [Using timer APIs to perform Animation](./examples/Extra/speed.js)
## Animation values
* **For transforms**
```js
t.animate({
scale: 1,
rotateX: '360deg' // with or without unit
})
```
* **For css properties**
```js
t.animate({
width: '20px'
})
```
* **Defining values using objects**
```js
t.animate({
rotate: {
value: 360, // 360deg
duration: 3000,
delay: 200,
direction: 'alternate'
}
})
```
Check out [this](./docs/properties) list to see which properties you can use when defining the animation values using objects.
* **`from` - `to` based animation values**
```js
import { helpers } from 'animated-timeline'
t.animate({
scale: helpers.transition({ from: 2, to: 1 })
})
```
Read more about `helpers` object [here](./docs/helpers.md).
* **Timing based animation values**
Use property `offset` to perform timing animations
```js
import { helpers } from 'animated-timeline'
t
.sequence([
t.animate({
el: '.one',
scale: 2
}),
t.animate({ el: '.two', scale: 1, offset: helpers.startAfter(2000) })
])
.start()
```
You can set a value for a property with or without any unit such as `px`, `em`, `rem`, `in`, `cm`, `mm`, `vw`, `vh`, `vmin`, `vmax`, `deg`, `rad`, `turn` etc.
## Documentation
[Check out the detailed documentation for `animated-timeline`.](./docs)
## Todos
* [ ] ReasonML port of the core engine
* [ ] timing model based on scroll position and gestures ?
* [ ] Synchronize engine time with speed coefficient
* [ ] Refactor tween data structure for more flexibility
* [x] Use data binding