altbizney / motionscope

Explode and explore dimensions in Software Animation

MotionScope (Preview Release)

Explode and explore dimensions in Software Animation. It’s like a console for an engineer, or a histogram for a photographer.

Made by your friends at Thinko, Computer Entertainment Studio ❤️

http://thinko.com/motionscope

Email: [email protected] for questions / comments

Installation

Save a copy of MotionScope.coffee in your projects modules sub-folder.

cd /your/framer/project
curl https://rawgit.com/yothinko/MotionScope/master/MotionScope.coffee -o modules/MotionScope.coffee

Usage

Specify the properties of any regular Framer layers you wish to plot.

(require "MotionScope").load((scope) ->
  # `modal` is the layer you want to attach the scope to
  scope.plot(modal, 'y')
  scope.plot(modal, 'scale')
)

Optionally, you can configure the MotionScope graph.

(require "MotionScope").load({
  parent: Scope
  reset: ResetButton
}, (scope) ->
  scope.plot(modal, 'x')
  scope.plot(modal, 'y')
)

The plot method can be configured as well.

(require "MotionScope").load({
  parent: Scope
  reset: ResetButton
}, (scope) ->
  scope.plot(oval, 'opacity', {
    color: '#FFA29C'
  })
)

MotionScope Options

• parent: pass a Framer layer to use as the MotionScope parent. The graph will be sized to the width and height of the parent layer.
• width, height: set the graph size without adding it to a parent layer.
• reset: pass a Framer layer to use as a reset button. Clicking the button will clear the graph.

Plot Options

• name: label for the chart legend. Defaults to the property name.
• color: color for the graph line. Defaults to Utils.randomColor if not specified.
• min, max: sets the extent of the line. If not set, continuously adjusts to the largest and smallest values seen.

motionscope's Issues

set z index of all children elements

legend is HTML so it needs z indexes as well.

get it to work with loading from NPM

Show Max & Min values on graph

When specifying expected max and min values, put them on the dotted lines (I think on the left hand side)

use Layer-based syntax

graph = new MotionScope
  plot:
    [modal,  "y"]
    [circle, "scale"]
  parent: wrapper
  width: Screen.width / 2
  height: Screen.height / 2

and

graph.plot(modal, "x")

continue plotting across live-reloads in Framer Studio

workaround: save your Framer project / force a hard reload