rx-ease

rx-ease

An operator to interpolate the values of your rxjs streams!

• Performant, in most case it should run at 60fps.
• Emits on requestAnimationFrame.
• Works with any kind of data structures (Object, arrays, single values).

Install

npm install rxjs rx-ease

The gist

Interpolate a single value

import { interval } from 'rxjs'
import { take, map, startWith } from 'rxjs/operators'
import ease from 'rx-ease'

const draw = x =>
  Array(Math.floor(x))
    .fill('#')
    .join('')

const progress$ = interval(1000).pipe(
  take(1),
  map(() => 100),
  startWith(0),
  ease(120, 18),
  map(draw)
)

progress$.subscribe(progress => console.log(progress))
// will log =>
// #
// ####
// ########
// #############
// #################
// ######################
// ##########################
// ##############################
// ##################################
// ######################################
// #########################################
// ############################################
// ##############################################
// ################################################
// ##################################################
// ####################################################
// #####################################################
// ######################################################
// #######################################################
// ########################################################
// #########################################################
// ##########################################################
// ##########################################################
// ##########################################################
// ##########################################################

Interpolate several values of an object

import { fromEvent } from 'rxjs'
import { map } from 'rxjs/operators'
import ease from 'rx-ease'

const circle = document.querySelector('.circle')

const position$ = fromEvent(document, 'click').pipe(
  map(e => ({ x: e.clientX, y: e.clientY })),
  ease({
    x: [120, 18],
    y: [120, 18]
  })
)

position$.subscribe(({ x, y }) => {
  circle.style.transform = `translate(${x}px, ${y}px)`
})

Api

type Config = [number, number]

Similarly to react-motion, rx-ease is a spring animation operator. To configure the animation you need to pass a stiffness and a damping value in an array like [stiffness, damping] (for example [120, 18]).

ease :: Config -> number -> Observable number

import { interval } from 'rxjs'
import ease from 'rx-ease'

const easedInterval$ = interval(1000).pipe(
  map(x => x * 100),
  ease([170, 26])
)

ease :: [Config] -> [number] -> Observable [number]

import { fromEvent } from 'rxjs'
import ease from 'rx-ease'

const easedMousePosition$ = fromEvent(window, 'mousemove').pipe(
  map(e => [e.clientX, e.clientY]),
  ease([
    [170, 26],
    [170, 26],
  ])
)

ease :: { key: Config } -> { key: number } -> Observable { key: number }

import { fromEvent } from 'rxjs'
import ease from 'rx-ease'

const easedMousePosition$ = fromEvent(window, 'mousemove').pipe(
  map(e => ({
    x: e.clientX,
    y: e.clientY]
  }),
  ease({
    x: [170, 26],
    y: [170, 26],
  })
)

presets

• noWobble: equivalent to passing [170, 26]
• gentle: equivalent to passing [120, 14]
• wobbly: equivalent to passing [180, 12]
• stiff: equivalent to passing [210, 20]

import ease, { presets } from 'rx-ease'

interval(1000).pipe(
  map(x * 100),
  ease(...presets.stiff)
)

Credits

This was heavily inspired by @chenglou's react-motion.