Menu Overlay Animation - Google Calendar for iOS

6,949
0
167
Prototype of the Material Design menu animation of Google Calendar for iOS. See how it was created step-by-step in the video of the webinar "Adaptive Prototypes & Material Design UI Library" http://docs.proto.io/videos/adaptive-prototypes-material-design-ui-library/ Skip to minute 35:14 of the webinar to specifically see this prototype being made. TAGS: material design google iOS calendar Enjoy.

Todd Siegel

Common onboarding pattern

3,479
0
63
This prototype shows a common onboarding pattern with a series of 3 panels, each with a different background media (photo, looping video, and a GIF). TAGS: onboarding sync page controller looping video GIF

Todd Siegel

Submarine Animation

8,475
1
28
A basic animation created by using the Proto.io HTML Component with HTML and CSS. No additional images were needed to be imported to create this animation. The HTML and CSS used was found at: http://codepen.io/ajerez/pen/EaEEOW

Akis Ioannou

Cook it

3,644
0
67
'Cook it' is an app where users can find recipes based on ingredients they have at home. This project uses variables to add ingredients to the list using a single input field. I created the loading animation using a group of images which rotate into a pot. I used cloning and obscurity transitions in the recipes screen to display the recipe when it's tapped.

Vasilis Odysseos

Bookstore website prototype

2,958
0
For my User Experience & Visual Design class we had to redesign the entire website for a bookstore called Laie that is based in Barcelona. This is desktop proposal. It's my first time using proto.io! Feedback is more than welcomed! I'm a 3rd year Graphic Design student from Barcelona. cristinanitrons@hotmail.com

66d6454f-504d-11ed 9221-0e76797a4f7b

auto-complete search

4,861
2
154
Type the first character of topics from http://uxofvr.com to see the auto-complete. (a-z, 2,3). Use ESC to hide the dropdown. Uses a variable to capture the content of the search field then uses the javascript method "{search}".charAt(0) to capture the first character of the search string to then change the container state property of the auto-complete dropdown to match the first character typed. see video of how to create this step-by-step in the webinar: https://support.proto.io/hc/en-us/articles/115001243532-Model-advanced-prototypes-that-use-variables TAGS: auto-complete search dropdown variables variable character selection Thanks to Costas Thoma for the model.

Todd Siegel

Conditional Animation Loop

3,470
0
30
An example project which allows the user to designate the number of times the Star component Spins. Simulating a conditional animation loop according to the input of the user while using a total of 2 variables and a container with 3 states.

72010307-9b82-11f0 ad7f-0e3ec7c5f8cf

Next