Expand/Collapse Menu

7,831
2
489
This is an expand/collapse menu example that can be created using container states.

Akis Ioannou

color picker

2,455
0
25
Done to explore setting colors with sliders and some Math expressions. Additional features, should anyone wish to build, would be to convert to HSV space, and to produce Hex color codes as well. To use colors, in the color controls of an element, replace the #XXXXXX hex code with this: rgb(255,125,45). Two swatches are provided, since color combinations are more interesting than single colors. Swatches are draggable.

03ec0da9-504d-11ed 9221-0e76797a4f7b

Drag and Drop Variables

5,152
9
217
Project using Variables to simulate Drag and Drop to Snap functionality into a predefined area. While also adding Animations and States for a more smooth and elegant process.

72010307-9b82-11f0 ad7f-0e3ec7c5f8cf

Cook it

3,659
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

Calendar concept

10,038
2
626
A calendar picker concept based on Ramotion's example on Dribbble, https://dribbble.com/shots/1782092-Survey-Platform-Design

Alexis Piperides

Google Inbox - compose animation

11,436
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

The Search Project

4,367
2
79
Hi there! The Search Project is my latest prototype that allow users to search images and have live results. Happy prototyping!

f4ff2085-9250-11ed 9221-0e76797a4f7b

Drag animations

3,896
0
84
This is a prototype that demonstrates you some of the capabilities of Proto.io. You are welcome to import this project and use these interactions in your prototypes. In this prototype you will see drag animations in all directions.

f4ff2085-9250-11ed 9221-0e76797a4f7b

Keezy App Animation

6,390
1
38
Tap/Hold the black circle to see the 2 state animation of the Keezy sound looping app. A circle of circular buttons spins out onto the expanded black circle that becomes the screen background. Once you're on this 2nd state, tap anywhere to return to the initial state. I recorded a webinar showing how to create this interactive animation: http://docs.proto.io/videos/re-creating-bespoke-interactive-animations-with-proto-io-2/ You can also find the assets here used for the prototype. Enjoy!

Todd Siegel

UBER

15,419
9
I created a prototype of the UBER app for Android in order to demonstrate what is possible using Proto.io. This project was a massive undertaking as my goal was to simulate the user experience of what it would be like to order 4 different UBER cars in San Francisco. I plan on doing a full "behind the scenes" article on my website about the challenges I faced along the way simulating the UBER app in Proto.io. Special thanks to the awesome team at Proto.io for all of their tireless assistance along the way! If you are looking for an experienced Proto.io prototype engineer or are looking for tutorials and more information about Proto.io please visit my website: http://protonerds.com/

8ea06e34-504c-11ed 9221-0e76797a4f7b

Next