Variables Examples

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

Akis Ioannou

Simulation of automatic logout

5,998
2
91
This project simulates an automatic logout after 5 seconds of inactivity in the prototype.

Akis Ioannou

Boombox

4,589
3
27
A demo created using draggable and rotation features.

Akis Ioannou

tvlive.io

3,260
0
10
Wireframes for UK television guide for Freeview, Sky and Cable TV.

c809fd8b-bc07-11ed 9221-0e76797a4f7b

GetLost Student Map

5,340
0
64
This one-screen prototype demonstrates some of Proto.io animation functionality.

Akis Ioannou

umu - assisting parents in challenging situations.

3,285
1
41
umu assists parents in challenging situations. A crowded day at the beach, a theme park, you name it. A tiny transmitter is carried by the child which's signal is received by the smartphone. When the child is bound to move out of sight or towards a dangerous sight such as water or a busy intersection the parents are alerted. see more at: http://crafting-convenience.com/umu/ Feel free to contact me at: jason@hello-bright.nl

ffe5cdd4-504d-11ed 9221-0e76797a4f7b

Pro Tips & Tricks

5,108
0
39
Here is the set of prototypes from the Pro Tips and Tricks webinar: 1) Propagate Events to Items Below 2) Containers as Symbols 3) Conditional Animation 4) Screen Interaction 5) Sketches into Prototype Here is the video of the webinar: http://docs.proto.io/videos/pro-tips-tricks/ The video is broken down with time-codes on Vimeo here: https://vimeo.com/103316955 (under read more) They are also below. Enjoy... > Create popover menu with click through to icon below 4:08 > Propagate all events to the item below 4:08 > Using containers as symbols for efficiency (navigation assets etc.) 11:59 > Customizing a navbar component 14:55 > Customize a tabbar component 16:48 > Convert navbar to a container to repeat (as symbol) 19:10 > Convert tabbar to a container to repeat (as symbol) 19:43 > Convert text box to a container to repeat (as symbol) 19:49 > Using a container to create change font style for repeated Titles and labels. 21:55 > Conditional animations triggered by drag gesture using variables (mailbox swipe). 23:04 > Adding containers to canvas 24:44 > Using the draggable gesture 25:25 > Variable Manager 26:00 > Using onDrag variable to change an objects opacity 26:38 > Range of property values that can be changed based on a drag gesture 27:45 > Capturing the X position from dragging an object using a variable 27:57 > Creating a new value if/then argument using shorthand javascript to change opacity using a variable. 29:00 > Creating a callback to the change a property that reads from a variable. 29:52 > Using the onDragEnd gesture 30:33 > Change the Left property using a variable triggered by onDragEnd 30:49 > See range of properties that can be changed from onDragEnd gesture. 31:04 > Using On Screen Show Interaction for creating an automatically cycling carousel. 35:25 > Importing paper sketches (photos of them) to use as background for layering assets and interactions. 40:28 > Toggling between a sketch and your higher fidelity mockup using states. 44:25 > Duplicating interactions between states 45:18

Todd Siegel

IMDb Redesign

10,169
2
300
Hey guys! I'm back with an amazing prototype for you guys. This has been my longest and quite a challenging redesign project for IMDb whose prototype is pretty awesome and contains lots of stuff like Nested Containers, a bit of animation, some really beautiful visual elements and interactivity for you to explore! I had so much fun making it with Proto.io and I truly hope you guys love it and would love to know your views and suggestions on how can I improve it :) Cheers! Aman

fda4c75e-504c-11ed 9221-0e76797a4f7b

Parallax - Yahoo Weather

4,121
0
35
Re-creation of the horizontal swipe parallax effect in Yahoo Weather. See how it was created step-by-step in this webinar: https://support.proto.io/hc/en-us/articles/223073307-Prototyping-parallax-effects TAGS: parallax variables variable

Todd Siegel

Next