This one-screen prototype demonstrates some of Proto.io animation functionality.

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.

A Picker selection navigates you to the screen selected. The project uses Variables and States and depending on the picker selection I change a button state to navigate you to the right screen.

A reverse timer using the handle to designate where the timer begins its countdown.

Netflix Desktop UI Sketch Resource Design: https://www.sketchappsources.com/free-source/3590-netflix-desktop-ui-sketch-freebie-resource.html

Using variables to change the opacity of items Design Downloaded from: https://www.sketchappsources.com/free-source/2567-chandelier-lighting-illustration-sketch-freebie-resource.html

One Page Website example created with Proto.io

The project contains numerous examples completed using variables and conditional logic.

An animation of our Solar System