🔥 Create timeline and playback based animations in React
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
demo
docs
examples
flow-typed/npm
media
src
.babelrc
.flowconfig
.gitignore ignore build Apr 30, 2018
.travis.yml
README.md More todos 😅 May 7, 2018
package-lock.json
package.json
webpack.config.js

README.md

Animated Timeline

author size Build Status

Create playback based animations in React

Table of contents

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:

Example usage with component API

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 (
    <Animate timingProps={timingProps} animationProps={animationProps}>
      <div style={styles} />
    </Animate>
  )
}

Read the detailed API reference for Component API

Example usage with Timeline API

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 <t.div style={styles} />
  }
}

Read the detailed API reference for Timeline API

Example usage with spring physics

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.div
        onMouseUp={() => s.setValue(0)}
        onMouseDown={() => s.setValue(1)}
        style={styles}
      />
    )
  }
}

Read the detailed API reference for spring physics

Animation types

Sequence based animations

Edit 6j08xylw7n

Timing based animations

Edit 92lm0xrl44

Staggered animation

Edit 743n1z9826

Keyframes

Edit 92lm0xrl44

Changing the animation position

You can also change the animation position along its timeline with an input value.

Edit kkjn9jq6k7

Spring based animations

Edit 75l1z6jzq

More examples

Animation values

  • For transforms
t.animate({
  scale: 1,
  rotateX: '360deg' // with or without unit
})
  • For css properties
t.animate({
  width: '20px'
})
  • Defining values using objects
t.animate({
  rotate: {
    value: 360, // 360deg
    duration: 3000,
    delay: 200,
    direction: 'alternate'
  }
})

Check out this list to see which properties you can use when defining the animation values using objects.

  • from - to based animation values
import { helpers } from 'animated-timeline'

t.animate({
  scale: helpers.transition({ from: 2, to: 1 })
})

Read more about helpers object here.

  • Timing based animation values

Use property offset to perform timing animations

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.

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

  • Use data binding