Animations

Animations

Animation patches in Origami are designed to be fluid and reversible: they take any changing number and tween it to be smooth.


Animation patches

  • Pop Animation A Natural bouncy animations commonly found in Facebook apps, and easily pass values to your developers with the the Pop framework for iOS, Rebound for Android, and Rebound JS for the web.

  • Classic Animation C Traditional easing curves, like linear, ease-in, and ease-out.

  • Repeating Motion Repeating, back-and-forth animations with easing curves.


Animating values

In combination with an Interaction or a Switch patch, which output 0 or 1, an Animation patch can tween that value so it smoothly animates from 0 to 1, and vice versa. Origami refers to this 0 to 1 value generally as progress.

This example below will scale a Layer from 0 to 1 (or 0% to 100%) when you touch down, with a reversible and bouncy animation:

Interaction

  • Layer
  • Enable
  • Down
  • Tap
  • Position
  • Force

Pop Animation

  • Number 1
  • Bounciness
  • Speed
  • Progress

Layer

  • Scale 1

Transitions

Animating from 0 to 1 is simple, but what about animating between other values?

Transition T patches let you transform that 0/1 into any start/end value:

Transition

  • Progress
  • Start Value
  • End Value

For example, if you want to animate a Layer’s width from 100px to 200px. You would specify a Start Value of 100, and an End Value of 200. In combination with the animated 0 to 1 value from above, you can easily animate a Layer’s width.

With a Progress of 0:

Transition

  • Progress 0
  • Start Value 100
  • End Value 200
  • 100

Layer

  • Size W 100

With a Progress of .5:

Transition

  • Progress 0.5
  • Start Value 100
  • End Value 200
  • 150

Layer

  • Size W 150

With a Progress of 1:

Transition

  • Progress 1
  • Start Value 100
  • End Value 200
  • 200

Layer

  • Size W 200

In combination with an animation patch, you can now animate between any two values easily:

Interaction

  • Layer
  • Enable
  • Down
  • Tap
  • Position
  • Force

Pop Animation

  • Number 1
  • Bounciness
  • Speed
  • Progress

Transition

  • Progress 1
  • Start Value 100
  • End Value 200
  • 200

Layer

  • Size W 200


Summary

  • Pop Animation and Classic Animation automatically tween any number.
  • Interaction, Switch, Animation, Transition (ISAT) are your bread and butter for animating layers.
  • Sync multiple animations together by using one animation patch connected to multiple Transitions, which map progress of 0-1 to any start/end values.