Google Inbox - compose animation

7,729
4
262
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

Extended UI libraries

12,178
2
82
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

Dynamic List Simulation

993
0
24
A simple implementation of how to simulate a Dynamic List which the user can manually increase or decrease using a single Container, a List component and States.

Constantinos Thoma

Date picker

915
0
37
An example of a date picker.

Jason Hamilton

Bodymovin Animation

348
0
7
A project which uses Vector Animations to recreate popular social app interactions.

Constantinos Thoma

Tinder UI

17,299
5
901
Tinder UI cards

Constantinos Demetriadis

Expand/Collapse Menu

2,504
2
230
This is an expand/collapse menu example that can be created using container states.

Akis Ioannou

Form examples

2,823
0
82
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

Menu Overlay Animation - Google Calendar for iOS

2,050
0
92
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

Vertical scrolling feed with 2 expandable areas

2,219
4
202
An example of our vertical scrolling feed, with 2 expandable areas. Feel free to import into your Proto.io account.

Akis Ioannou

Next