https://github.com/Andarist/callbag-ms-elapsed

👜 Callbag listenable source which emits milliseconds elapsed since the subscription (using requestAnimationFrame) - useful for animations.
https://github.com/Andarist/callbag-ms-elapsed

callbag callbags

Last synced: 3 months ago
JSON representation

👜 Callbag listenable source which emits milliseconds elapsed since the subscription (using requestAnimationFrame) - useful for animations.

• Host: GitHub
• URL: https://github.com/Andarist/callbag-ms-elapsed
• Owner: Andarist
• Created: 2018-08-04T19:10:55.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-10T11:30:03.000Z (almost 6 years ago)
• Last Synced: 2024-10-20T06:23:23.095Z (3 months ago)
• Topics: callbag, callbags
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-callbags - ms-elapsed

README

        
# callbag-ms-elapsed

Callbag listenable source which emits milliseconds elapsed since the subscription (using requestAnimationFrame) - useful for animations.

## Example

```js

import msElapsed from 'callbag-ms-elapsed'

import forEach from 'callbag-for-each'

import map from 'callbag-map'

import pipe from 'callbag-pipe'

import takeWhile from 'callbag-take-while'

const duration = ms =>

  pipe(

    msElapsed,

    map(elapsed => elapsed / ms),

    takeWhile(factor => factor <= 1),

  )

const distance = d => t => t * d

const moveBall = (ball, easing) => {

  pipe(

    duration(1000),

    map(easing),

    map(distance(400)),

    forEach(y => {

      ball.style.transform = `translate3d(0, ${y}px, 0)`

    }),

  )

}

const easeOut = p => 1 - (1 - p) * (1 - p)

moveBall(document.getElementById('ball'), easeOut)

```