Google Inbox - compose animation

11,458
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,364
3
27
A demo created using draggable and rotation features.

Akis Ioannou

Swipe animations

4,740
0
38
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 swipe animations in all directions.

f4ff2085-9250-11ed 9221-0e76797a4f7b

Keezy App Animation

6,412
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

BusTRACK

1,881
0
4
Vencedores do concurso de ideias 11-04-2015

b409dec5-504d-11ed 9221-0e76797a4f7b

Pulse Band Prototype Revision 1

1,992
0
This is a prototype of an app that pairs with a fitness track called Pulse Band. Pulse Band can count steps, measure heart rate, count stairs climbed, and also measure blood pressure.

3ac63a40-504e-11ed 9221-0e76797a4f7b

Color Picker

3,007
1
8
Here's a demo showing a basic color picker using a container with 4 states for both the colored star and the color swatches.

Todd Siegel

SpaceTrip Low-fidelity

3,302
0
2
Basic shapes like rectangles, lines, circles, text and more are available and they can be dropped on the canvas to create the very first draft of a mobile app in order to demonstrate the flow and functionality of the app.

a03851e9-504c-11ed 9221-0e76797a4f7b

Pandora

4,499
0
43
This prototype is a simulation of one part of the Pandora iPhone app. I have chosen to simulate the part of the app where the user selects a Pandora radio station and then proceeds to select that station. What I have demonstrated is how how the radio station animates from a small entry on a list to a large full screen entry and vice versa. If you would like to see how I created this prototype, please watch this video tutorial here: http://docs.proto.io/videos/pandora-tutorial-part-1/

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

Next