Google Inbox - compose animation

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

Keezy App Animation

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

iOS Weather App

4,277
1
124
This is the companion prototype to a 2-part tutorial where we explore the utilization of variables to help us to recreate Apple’s native iOS Weather app. In both tutorials, we go over the different ways Proto.io makes variables available to use in building your prototypes - from the simple example of setting a value in the variables manager and utilizing that value in the prototype to creating and setting a custom variable based on the property of a container and then to the more advanced usage of ternary operators to affect an outcome based on conditions surrounding that custom variable. http://docs.proto.io/videos/ios-weather-app-variables-tutorial-part-1/ http://docs.proto.io/videos/ios-weather-app-variables-tutorial-part-2/

dc4b62f6-ed80-11ed 9221-0e76797a4f7b

Sticky Scrolling Sidebar Example

5,937
0
82
An example of a sticky scrolling sidebar (website)

Akis Ioannou

MeetUrMate

3,842
1
82
Our product from the latest Startup Weekend in HEC Montreal - Shared Economy (March 2016) This is your AirBnB for roommates. As most similar platforms focus on linking people to spaces, we focused our design in linking people to spaces and lifestyle. For each result shown, you will be able to quickly identify the % you match based on 10 carefully selected lifestyle criteria. As an added feature, you can identify the % match for each person living in the space. Moreover, we provided an opportunity to people with spaces to take the initiative in connecting to potential seekers. Closing the loop on the shared economy ecosystem.

b41689b8-504d-11ed 9221-0e76797a4f7b

darkrun.

2,547
0
12

Visit the Alps

3,897
0
61
This prototype is designed to be a promotional website for the Alps and features animations based on the scroll position. Thanks to https://dribbble.com/victorerixon for the inspiration.

Vasilis Odysseos

Dynamic List Simulation

3,935
0
74
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.

72010307-9b82-11f0 ad7f-0e3ec7c5f8cf

Next