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?

TransitionT 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: