Variables Examples

35,219
44
2,625
The project contains numerous examples completed using variables and conditional logic.

Akis Ioannou

Expand/Collapse Menu

7,857
2
489
This is an expand/collapse menu example that can be created using container states.

Akis Ioannou

Tap to animate

4,608
0
68
This is a prototype that demonstrates you some of the capabilities of Proto.io. You are welcome to import this project and use these interactions in your prototypes. In this prototype you will see the following interactions: Tap to rotate Tap to zoom in/out Tap and hold to transform.

f4ff2085-9250-11ed 9221-0e76797a4f7b

Android scrollable tabbar

5,492
0
115
Custom Android KitKat Scrollable Tabbar

Akis Ioannou

Extended UI libraries

26,291
3
122
An extended collection of fully animatable UI libraries like triangles, stars, arrows and more, let you bring your idea to life all within Proto.io.

Akis Ioannou

iOS Weather App

4,302
1
124
This is the companion prototype to a 2-part tutorial where we explore the utilization of variables to help us to recreate Apple’s native iOS Weather app. In both tutorials, we go over the different ways Proto.io makes variables available to use in building your prototypes - from the simple example of setting a value in the variables manager and utilizing that value in the prototype to creating and setting a custom variable based on the property of a container and then to the more advanced usage of ternary operators to affect an outcome based on conditions surrounding that custom variable. http://docs.proto.io/videos/ios-weather-app-variables-tutorial-part-1/ http://docs.proto.io/videos/ios-weather-app-variables-tutorial-part-2/

dc4b62f6-ed80-11ed 9221-0e76797a4f7b

Pandora

4,501
0
43
This prototype is a simulation of one part of the Pandora iPhone app. I have chosen to simulate the part of the app where the user selects a Pandora radio station and then proceeds to select that station. What I have demonstrated is how how the radio station animates from a small entry on a list to a large full screen entry and vice versa. If you would like to see how I created this prototype, please watch this video tutorial here: http://docs.proto.io/videos/pandora-tutorial-part-1/

8ea06e34-504c-11ed 9221-0e76797a4f7b

Next