Slide in menu

6,687
1
301
A beautifully animated Slide in Menu created exclusively with Proto.io. Feel free to import this fully editable project into your own account for use in your prototypes.

Akis Ioannou

Restaurant

1,840
0
Website prototype for a restaurant.

84fd7788-504d-11ed 9221-0e76797a4f7b

uva

1,892
0
Take your personal assistant to the next level with uva! Uva is always there when you need it, so you never have to worry! Search anything, get recent news for your location, subscribe to your favorite subscriptions, and even talk with custom user bots! http://www.stilsonjake.wixsite.com/hellouva https://www.kickstarter.com/projects/404297745/uva-the-smarter-assistant https://www.indiegogo.com/projects/uva-the-smarter-assistant-social/x/15941660

1a131f84-48d4-11ef ab6d-0e76797a4f7b

Google Inbox - compose animation

11,456
5
286
The recently released Google Inbox app is a re-thinking of the email inbox experience that beautifully demonstrates Google's material design interactive animation language. This prototype focuses on the compose button's animation. Click the + to reveal a new state where a wave of buttons and labels float up, and the + becomes a pencil icon. It uses two states, with staggered animations.

Todd Siegel

Boombox

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

Akis Ioannou

Faces flying out of bar chart

3,444
1
13
A data visualization where a bar chart of faces flies out showing the details of individual faces.

Todd Siegel

Pro Tips & Tricks

4,983
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

Hide Navigation Bar On Scroll

5,916
4
177
This is an example of a Navigation Bar that disappears on any downward scroll and re-appears on on any upward scroll.

Akis Ioannou

MyVacation

3,355
0
iOS app prototype using the magnificent Proto.io that let users share their stories about their travel. A work in progress but definitely in good direction! To experience, simply click anywhere on the main screen. On mobile, tap on the password field and then tap done.

33115daa-ab16-11ef a04a-0e3ec7c5f8cf

Next