Get the position of a scrolling container

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

onboarding of Service App

4,313
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

GoodReads

5,597
2
166
This is the redesign of GoodReads app for Android. Hope you guys love it, and I would love to know your views about it!

fda4c75e-504c-11ed 9221-0e76797a4f7b

Sticky Scrolling Sidebar Example

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

Akis Ioannou

multiple slider test

1,746
2
A score based filter system that I hacked using variables. Each of the 10 cities is assigned a score for avg temperature, Taxes, and Cost of living, and when the sliders correspond to those values cumulatively, those cities show up on the map.

b5c076e7-504c-11ed 9221-0e76797a4f7b

Pro Tips & Tricks

4,187
0
39
Here is the set of prototypes from the Pro Tips and Tricks webinar: 1) Propagate Events to Items Below 2) Containers as Symbols 3) Conditional Animation 4) Screen Interaction 5) Sketches into Prototype Here is the video of the webinar: http://docs.proto.io/videos/pro-tips-tricks/ The video is broken down with time-codes on Vimeo here: https://vimeo.com/103316955 (under read more) They are also below. Enjoy... > Create popover menu with click through to icon below 4:08 > Propagate all events to the item below 4:08 > Using containers as symbols for efficiency (navigation assets etc.) 11:59 > Customizing a navbar component 14:55 > Customize a tabbar component 16:48 > Convert navbar to a container to repeat (as symbol) 19:10 > Convert tabbar to a container to repeat (as symbol) 19:43 > Convert text box to a container to repeat (as symbol) 19:49 > Using a container to create change font style for repeated Titles and labels. 21:55 > Conditional animations triggered by drag gesture using variables (mailbox swipe). 23:04 > Adding containers to canvas 24:44 > Using the draggable gesture 25:25 > Variable Manager 26:00 > Using onDrag variable to change an objects opacity 26:38 > Range of property values that can be changed based on a drag gesture 27:45 > Capturing the X position from dragging an object using a variable 27:57 > Creating a new value if/then argument using shorthand javascript to change opacity using a variable. 29:00 > Creating a callback to the change a property that reads from a variable. 29:52 > Using the onDragEnd gesture 30:33 > Change the Left property using a variable triggered by onDragEnd 30:49 > See range of properties that can be changed from onDragEnd gesture. 31:04 > Using On Screen Show Interaction for creating an automatically cycling carousel. 35:25 > Importing paper sketches (photos of them) to use as background for layering assets and interactions. 40:28 > Toggling between a sketch and your higher fidelity mockup using states. 44:25 > Duplicating interactions between states 45:18

Todd Siegel

Hide Navigation Bar On Scroll

4,959
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]

2,735
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

MeetUrMate

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

Next