Origami Studio Tutorial #5 | How To Create time-based automatic animations – UX Hacker

Origami Studio Tutorial #5 How To Create time based automatic animations UX Hacker.
#OrigamiStudio #FacebookOrigami #OrigamiStudioTutorials #5
—
Sometimes you would like an animation to occur simply on its own — as soon as a prototype starts, or with only a timer triggering it.

Sometimes you want multiple things to happen over time, all purely time-based, without any tap triggers or the like.

We’re going to rebuild the Comments experience of Facebook Live to explore how to do this. Make sure you download the tutorial files if you want to follow along with the same material.

Setting up
If you start with the tutorial files, you should see that we have already connected our Comments Position Y to an Option Switch and Option Picker. (If you haven’t checked out the lessons on Multiple States you might not know what this means. That’s fine for this tutorial).
Click through each of these inputs to cause a pulse, making the Position Y of Comments move up or down. Clicking on Set To 1 will bring up our first position, Set To 2 our second, and so on.
When prototype starts
That first position (Set To 0) is our starting position. How can we automatically have our prototype go to next position (Set To 1) after a set time?

Origami has a patch for this purpose, called When Prototype Starts.

Insert one to our Patch Editor by double-clicking on the Patch Editor ⌘⏎, typing to find When Prototype Starts, then Return ⏎.

Then connect this to the Set to 1 input on the Option Switch patch.
Our prototype has already started, so we won’t see the effect of this until we click the Restart Prototype button on the Viewer toolbar. Keep an eye on pulses occurring in the Patch Editor as you do this.
Wait
We are instantly going to Option 1, but what we actually want is for that option to only kick-in after the prototype starts and holds off little bit, to give a bit of breathing room. We want the prototype to Wait a second.

Insert a Wait patch between the When Prototype Starts and the Option Switch. Double-click on the Patch Editor ⌘⏎, type to find Wait, then Return ⏎.

Connect the When Prototype Starts output to the Start input in the Wait patch, and the output of Wait to that Set to 1 input.
Restart our prototype now, and keep an eye on the first two patches. You should see that the signal is immediately sent, and then after one second, the signal is carried on to the Option Switch.
Wait patches as our solution. These will then be connected to corresponding inputs in the Option Switch.

Add more Wait patches by double-clicking on the Patch Editor ⌘⏎, typing to find Wait, and then Return ⏎.

Like the first Wait patch, have the output of the When Prototype Starts go into its Start input. Have the output of this Wait patch go to the next Option Switch input, which is Set to 2.

Give the second Wait patch a duration of 3 seconds. That means that the 3 seconds is counting from when the prototype starts, not 3 seconds from when the first Wait patch is triggered.
Multiple delays
For the sake of simplicity, keep all timing connected to When Prototype Starts.

Add enough Wait patches to cover each Option Switch input (5 in total). You can add new patches by double-clicking on the Patch Editor, or by Option-clicking ⌥ and dragging an existing one. That will create a new Wait patch, with the same input connection.

source