Get the position of a scrolling container

4,518
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,917
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

Poweramp [Music Player]

3,357
0
37
This is the prototype of my favorite music player, Poweramp. I've tried to recreate the Plastic HD theme of the app interface and made it pretty close to the original visually which includes some of the transitions. This design has been made with Adobe Photoshop CC and Material Design Library of Proto.io. Hope you guys like it! Would love to know your views on it and how can we improve it :) Cheers! Aman P.S: Turn up the speaker ;)

fda4c75e-504c-11ed 9221-0e76797a4f7b

Tinder UI

22,572
6
1,215

Sliding menus - Animation on screen

5,286
0
29
Sliding menu with animation on screen

Akis Ioannou

UBER

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

Recreating the Google logo using just circles and rectangles!

3,760
2
12
"It’s still all ones and zeros!" We got inspired by this article on Quora (https://www.quora.com/How-could-Googles-new-logo-be-only-305-bytes-while-its-old-logo-is-14-000-bytes) that talks about the Google logo and how it consists of circles and rectangles. So we set off to validate this inside Proto.io (https://proto.io). Proto.io is particularly strong for it’s interactive UI Libraries but it’s web based editor also offers great support for basic shapes like ovals, lines and rectangles. So we recreated the Google logo using only rectangles and circles and what do you know! It all checks out! Having done all this in Proto.io that it also known for it’s pretty neat animation capabilities, we went a step further and created a cool animation that shows how it’s all done. For even more fun you can even import it in your own Proto.io account and edit it! Enjoy!

Alexis Odysseos

onboarding of Service App

5,169
4
137
Re-creation of the onboarding sequence of the app "Service" See how it was done step-by-step in the on-boarding webinar: http://docs.proto.io/videos/creating-great-on-boarding-experiences-with-proto-io/ The app itself: https://itunes.apple.com/us/app/service/id1005945537?mt=8

Todd Siegel

Net Magazine Prototype - Juxtacaption

3,334
1
12
This is prototype was created for the Net magazine article "Design Prototypes That Reel Real - with Proto.io. It includes a step-by-step written tutorial with screenshots here: http://www.creativebloq.com/web-design/design-prototypes-feel-real-protoio-21619311 It's a product concept for juxtaposing two photos and typing a caption about the connection between them. It should look like this. The tutorial starts with bringing in a range of external assets. Then it'll show how to design assets and customize native components within the tool. Interactions will be triggered by gestures, keyboard input, and automatically as the prototype loads, then choreographed along an animation timeline. Enjoy... TAGS text input capture staggered animation variable variables show captured text input on different screen

Todd Siegel

Next