Skip to content

Widdershin/cycle-animation-driver

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm version Build Status


cycle-animation-driver

A Cycle driver for requestAnimationFrame

Installation

npm install cycle-animation-driver --save

Usage

cycle-animation-driver uses requestAnimationFrame to provide an Observable stream of timestamps, as fast and smooth as the browser will allow. You can access both the current time with timestamp, and also the delta (difference since last update).

import {run} from '@cycle/core';
import {makeDOMDriver, div} from '@cycle/dom';
import {makeAnimationDriver} from 'cycle-animation-driver';

function main ({DOM, animation}) {
  return {
    DOM: animation.pluck('timestamp').map(timestamp => div('.time', timestamp.toString()))
  }
}

const drivers = {
  DOM: makeDOMDriver('.app'),
  animation: makeAnimationDriver()
}

run(main, drivers);

Example

Check out the live example at widdersh.in/cycle-animation-driver.

The source code for that example can be found here.

About

A Cycle driver for requestAnimationFrame

Resources

License

Stars

Watchers

Forks

Packages

No packages published