Variables Examples

33,741
44
2,617
The project contains numerous examples completed using variables and conditional logic.

Akis Ioannou

Sliding Tab Menu

3,651
0
34
Sliding navigation of Tab Menu

Akis Ioannou

iPhone 5S Dial Pad

3,764
2
107
This is an interactive dial pad, created with proto.io. Development & original idea: https://spaces.proto.io/akisioannou Graphic design: George Prentzas

f4ff2085-9250-11ed 9221-0e76797a4f7b

GetLost Student Map

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

Akis Ioannou

Expand container that moves adjacent content in sync

2,999
3
55
This simple prototype demonstrates how have a container expand and collapse while moving adjacent content in sync.

Todd Siegel

Menu Flyout Subtle Animation

3,231
1
56
Re-creation of the apple.com mobile site flyout menu with subtle animations. See how it was re-created step-by-step: http://docs.proto.io/videos/prototyping-subtle-animation/ Enjoy.

Todd Siegel

SANOVA

2,658
1
Spa and salon app

Derek Hatfield

Form examples

7,450
0
165
3 prototypes showing different uses of the form components for iOS 1) Activate / de-activate button when checking / un-checking Terms of Service 2) Capture text input to change property 3) Change number of tickets - limit 8 See how they were created step-by-step in the Using Forms webinar video: https://vimeo.com/118919393 This version on Vimeo includes time-codes so you can jump to particular sub-sections (repeated below as a preview): > Range of iOS form input controls 2:02 > Labels 2:17 > Text fields 2:32 > Setting placeholder text 3:04 > 5 Input Types that display the appropriate iOS keyboard (Text, Numeric, Email, Password, Telephone) 3:30 > Using the Telephone keyboard for credit card number input (large # keys) 4:08 > Need to view prototype on device in order to see the range of keyboards 5:59 > Multi-line text area input field 6:24 > Search Bar 6:40 > Checkbox control customization 7:22 > On/Off Switch control customization 7:52 > Slider control customization 9:27 > Increasing size of slider handle 9:47 > Picker Wheel Customization 10:00 > Prototype example: Activate button when checking terms of service 10:42 > Create a button with two states (using convert to container) 12:55 > Adding interactions to a checkbox control (on change activation/deactivation) 14:45 > Definition of variable and range of uses 17:04 > Using variables with text field interactions 18:25 > Prototype Example: Using a variable to capture text input and show it in a different text box using change property. 23:27 > Prototype: Use variables to increment and decrement counter showing number of tickets being purchased. 28:40 > Searching full range of icons built into Proto.io 29:10 > Using a variable to limit the range of tickets (0 to 8) 32:46 > Copying and pasting interactions with Variables 40:08

Todd Siegel

On-boarding carousel

6,182
2
248
An on-boarding carousel concept, created using Proto.io. It is implemented using state animations. Feel free to import into your Proto.io account.

a03851e9-504c-11ed 9221-0e76797a4f7b

Drag and Drop

4,783
0
79
Drag and Drop an avatar over a target area that animates when in the drop zone. When released outside the target drop zone, it returns to the original location. Uses a variable to define the target drop zone, that then triggers animations in the zone and when dropped. See how it was made step by step in the webinar video: https://support.proto.io/hc/en-us/articles/115000637591-Advanced-Scrolling-Dragging TAGS: drag and drop dragging variables variable animations on drop animation

Todd Siegel

Next