Material Motion Exploring solutions that will empower creators with the tools needed to describe and implement rich, interactive motion on any platform. Edit this page · History
MotionObservable · $._map pluck
Status Interface level Implementation level Library
Proposed as of April 17, 2017 L2: Interaction creator L3: Stream creator material-motion
JavaScript View View
upstream (T)
path (String)
(U) downstream

pluck specification

This is the engineering specification for the MotionObservable operator: pluck.

This operator is reserved for platforms that support keyed type introspection or dictionary-based streams.


pluck extracts a value from a dictionary using a given path. Paths are dot-delimited keys, e.g. translate or translate.x.

Example usage


upstream        path  |  downstream
{x: 50, y: 20}  x     |  50
{x: 10, y:  0}  x     |  10
{x:  5, y: 60}  x     |   5
{x: 60, y: 35}  x     |  60
{x: 53, y: 32}  x     |  53
{x: 21, y: 57}  x     |  21
{x: 57, y: 74}  x     |  57


Expose a pluck operator API

Accept a single String argument path.

pluck<U>(path: string): MotionObservable<U>

Emit the new value

Split the path by . and iterate through the incoming dictionary with the resulting array of key values. Emit the final value or nothing if no keyed value exists.

const pathSegments = path.split('.');

return function plucker(value) {
  let result = value;

  for (let pathSegment of pathSegments) {
    result = result[pathSegment];

  return result;