Animated Navigation Bar

3,606
0
53
This Animated navigation bar project was created to simulate feedback when interacting with a button on a navigation bar while also giving it some snap functionality. Was created using Containers and States.

Constantinos Thoma

auto-complete search

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

Image upload animation

2,126
0
24
This image uploading animation simulates dragging and dropping a file into a predefined area using Variables. *Credits to Jokūbas as this is a replicate of his animation https://dribbble.com/shots/1413804-Image-Uploading-Animation

Anna w

Using a switch to select items and add costs

2,532
0
54
Use a variable to add the costs of premium features that are selected or deselected using an iOS switch component. See a video of how to do this step-by-step in this webinar: https://support.proto.io/hc/en-us/articles/115001585411-Model-advanced-prototypes-that-use-variables-part-II TAGS: variables variable math addition switch switches fire an items event

Todd Siegel

Bungee jump animation with custom easings

3,118
0
Say hello to our brand new visual easings manager! This project was created using custom easings and more specifically cubic bezier.

Christos Chatzikkos

Conditional Animation Loop

3,133
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.

Constantinos Thoma

Zero inbox

2,414
0
14
Zero inbox example using the 'Slide to Delete' pattern

34041018-d2c9-11ed 9221-0e76797a4f7b

Delicious

3,713
0
I used the Sketch "Delicious" free UI Kit for a food recipes app. It includes 11 pixel-perfect screens. I just added Proto.io interactions and created a great prototype! This Delicious UI Kit was designed by Robert Anitei Sketch source: https://www.sketchappsources.com/free-source/1765-delicious-ui-kit-sketch-freebie-resource.html

34041018-d2c9-11ed 9221-0e76797a4f7b

Lights Control

3,078
0
Using variables on a slider to control the Brightness and Hue of a light bulb

34041018-d2c9-11ed 9221-0e76797a4f7b

Next