auto-complete search

4,879
2
154
Type the first character of topics from http://uxofvr.com to see the auto-complete. (a-z, 2,3). Use ESC to hide the dropdown. Uses a variable to capture the content of the search field then uses the javascript method "{search}".charAt(0) to capture the first character of the search string to then change the container state property of the auto-complete dropdown to match the first character typed. see video of how to create this step-by-step in the webinar: https://support.proto.io/hc/en-us/articles/115001243532-Model-advanced-prototypes-that-use-variables TAGS: auto-complete search dropdown variables variable character selection Thanks to Costas Thoma for the model.

Todd Siegel

Conditional Animation Loop

3,503
0
30
An example project which allows the user to designate the number of times the Star component Spins. Simulating a conditional animation loop according to the input of the user while using a total of 2 variables and a container with 3 states.

72010307-9b82-11f0 ad7f-0e3ec7c5f8cf

Get the position of a scrolling container

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

Google Inbox - compose animation

11,435
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,382
1
25
A demo showcasing Windows 8 components.

Akis Ioannou

Reproducing instagram info bars behaviour

6,199
9
291
A basic example of reproducing Instagram info bars behaviour. A list header floats over the list's items and remains visible at the edge of the screen until it is replaced by the next list header

Akis Ioannou

Vertical scrolling feed with 2 expandable areas

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

Akis Ioannou

Halal Local

2,343
1
Non-professional tour guide is a popular alternative for travellers seeking for cheaper price of service. Travellers want an integrated platform to personally pick a tour guide that meet their specific needs

1ab9f6b7-504e-11ed 9221-0e76797a4f7b