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:

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:

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:

With a Progress of .5:

With a Progress of 1:

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

---

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.

---