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
Property · Interaction Scalable
Status Library
Draft as of December 20, 2016 interactions

Scalable specification

This is the engineering specification for the Scalable interaction.


Feeds scale starting from an initial scale to a given property.

Example use:

runtime.connect(Scalable(view: view, containerView: containerView))


Expose a Scalable type

public class Scalable: Interaction

Expose configurable values

All property values should be readonly, all stream values should be settable.

class Scalable {

  /** The property to which the value stream is expected to write. */
  public let property: ReactiveProperty<CGFloat>

  /** A stream that emits values to be written to the property. */
  public var valueStream: MotionObservable<CGFloat>

  /** A stream that emits velocity when the gesture recognizer ends. */
  public var velocityStream: MotionObservable<CGFloat>

  /** The gesture recognizer that drives this interaction. */
  public let gestureRecognizer: ScaleGestureRecognizer

Expose an initializer

Allow a gesture recognizer to be optionally provided.

class Scalable {
  public init(property: ReactiveProperty<CGFloat>,
              containerElement: Element,
              gestureRecognizer: ScaleGestureRecognizer? = nil)

Store the property

class Scalable {
  init(...) { = property


Create a gesture recognizer if one was not provided

class Scalable {
  init(...) {

    self.gestureRecognizer = gestureRecognizer ?? ScaleGestureRecognizer()
    if self.gestureRecognizer.element == nil {


Create the value and velocity streams

class Scalable {
  init(...) {

    let source = gestureSource(self.gestureRecognizer)
    self.valueStream = source.scaled(from: property)
    self.velocityStream = source.velocity()

Expose a convenience initializer

The convenience initializer should extract the necessary property from the provided element.

class Scalable {
  public init(element: Element,
              containerElement: Element,
              gestureRecognizer: ScaleGestureRecognizer? = nil)