cycle-animation-driver

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #go #android #rust #awesome #kubernetes #awesome-list #vue #ios #openai #open-source

cycle-animation-driver

(★ 34)

A Cycle driver for requestAnimationFrame

cycle-animation-driver Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![npm version](https://badge.fury.io/js/cycle-animation-driver.svg)](http://badge.fury.io/js/cycle-animation-driver)
[![Build Status](https://travis-ci.org/Widdershin/cycle-animation-driver.svg?branch=master)](https://travis-ci.org/Widdershin/cycle-animation-driver)

* * *

# cycle-animation-driver
A Cycle driver for requestAnimationFrame

Installation
---

```bash
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).

```js
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](http://widdersh.in/cycle-animation-driver/).

The source code for that example can be found [here](https://github.com/Widdershin/cycle-animation-driver/blob/gh-pages/index.js).

cycle-animation-driver

cycle-animation-driver Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

cycle-animation-driver

cycle-animation-driver Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README