rx-ease

An animation operator for RxJs Observables!

• Physic based. The animation seemlessly interupts itself if a new value is emitted before it completes.
• Performant, emits on requestAnimationFrame at 60fps.
• Typescript first class support.
• Versatile, Works with any kind of data structures (Object, arrays, single values).

Install

npm install rxjs rx-ease

The gist

Interpolate between emitted numbers

You can simply use the ease operator in an observable pipeline. You need to configure the ease operator with two numbers: a stiffness value and a damping value. See the presets sections bellow for example of configurations.

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(
  startWith(0),
  map(i => * 100),
  ease(120, 18),
  map(draw)
)

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

Interpolate several properties of an object

If your Observable emits an object instead of a single number, you can use the ease operator to interpolate the values of one or several properties of this object. Just pass to ease an object of the same shape as the observed value with a config for each property you want to ease.

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

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]).

Easing a single value

signature

type Config = [number, number]
ease: (config: Config) => (stream: Observable<number>) => Observable<number>

example

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

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

Easing values of an array

signature

ease: (config: Config[]) => (stream: Observable<number[]>) => Observable<number[]>

example

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],
  ])
)

Easing properties of an object

signature

ease: (config: Record<K, Config>) => (stream: Observable<Record<K, Config>>) => Observable<Record<K, Config>>

example

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 => x * 100),
  ease(...presets.stiff)
)

Credits

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