Vertical scrolling feed with 2 expandable areas

7,557
6
407
An example of our vertical scrolling feed, with 2 expandable areas. Feel free to import into your Proto.io account.

Akis Ioannou

Date picker

8,198
1
441
An example of a date picker that can be imported and used in your project. (Basic use of variables) tags: calendar, picker, date picker

34041018-d2c9-11ed 9221-0e76797a4f7b

It’s gradients, brought to life!

4,150
0
24
This prototype showcases a new Proto.io feature called Gradients, it’s a new way to create and animate gradients straight in Proto.io. You can now make your UI pop with vibrant linear or radial colors, and bring to life with beautiful animations.

Akis Ioannou

Orbit

4,234
0
13
An animation of our Solar System

Akis Ioannou

Google Inbox - compose animation

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

Windows 8 Showcase

4,299
1
25
A demo showcasing Windows 8 components.

Akis Ioannou

Spotify

23,618
6
630
Hi there! I would like to share with you the latest version of Spotify prototype. Now you can listen to music while browsing the prototype.

f4ff2085-9250-11ed 9221-0e76797a4f7b

Tumblr

6,175
0
108
Tumblr has a very nice series of animations that happens when you enter the compose mode. I thought it would be interesting to recreate this in Proto.io to show others how to achieve these kind of effect in their own protototypes. I have made a companion tutorial video where you can see exactly how I did it. This video is available here: http://docs.proto.io/videos/recreating-tumblr-compose-animations-in-proto-io/

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

Get the position of a scrolling container

4,438
2
114
If you need to get the Y position of a vertically scrolling container, create a text box. Then on the container scroll trigger, set a variable that evaluates the numerical callback value from the event (Y position). Then add a callback that changes the text property of the text box by reading from the variable.

Todd Siegel

Hide Navigation Bar On Scroll

5,785
4
177
This is an example of a Navigation Bar that disappears on any downward scroll and re-appears on on any upward scroll.

Akis Ioannou

Next