iOS Spotlight

26,633
0
79
Using color adjustment and filters, I've simulated the iOS spotlight animation. Learn how you can apply these filters at https://proto.io/en/new-features/adjustments-filters/

a03851e9-504c-11ed 9221-0e76797a4f7b

auto-complete search

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

Tinder UI

22,555
6
1,215

Menu Overlay Animation - Google Calendar for iOS

6,966
0
167
Prototype of the Material Design menu animation of Google Calendar for iOS. See how it was created step-by-step in the video of the webinar "Adaptive Prototypes & Material Design UI Library" http://docs.proto.io/videos/adaptive-prototypes-material-design-ui-library/ Skip to minute 35:14 of the webinar to specifically see this prototype being made. TAGS: material design google iOS calendar Enjoy.

Todd Siegel

ELAGANCE with updated menu transition

6,315
3
Hey guys, I have updated the menu interaction in this version. Hope, you'll like this updated version more.. For those who are viewing this for the first time, it's a prototype of an ecommerce app. If you're looking for a proto.io engineer, feel free to hire me over upwork. Following is the link to my upwork profile : https://www.upwork.com/o/profiles/users/_~01d24fbe3d33d437b2/

00812837-504d-11ed 9221-0e76797a4f7b

Silent Shaves (Intro)

4,785
1
250
Concept intro of a mobile app. Loading screen and logo animating to the home screen of the app. Content appears in a subtle animation.

Alexis Piperides

Map Data Visualization with Slider using Variables

4,790
1
127
Use a slider component to see the how a map of the US changes every month over a year based on the concentration of a fanbase. Uses a basic variable to change the container state of the map, with map assets created in Sketch. See how a version of it was created step-by-step within the Dashboard & Data Visualization webinar: http://docs.proto.io/videos/using-proto-io-for-dashboards-and-data-visualizations/ tags: variable | variables | data visualization | data viz | map | slider | states | months | USA

Todd Siegel

Get the position of a scrolling container

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

Next