Get the position of a scrolling container

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

Demo: Web parallax

7,051
3
113
Have a look at this stunning Parallax effect created exclusively with Proto.io. Feel free to import this fully editable project into your own account for use in your prototypes.

Akis Ioannou

Cook it

3,634
0
67
'Cook it' is an app where users can find recipes based on ingredients they have at home. This project uses variables to add ingredients to the list using a single input field. I created the loading animation using a group of images which rotate into a pot. I used cloning and obscurity transitions in the recipes screen to display the recipe when it's tapped.

Vasilis Odysseos

auto-complete search

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

Website Template

4,129
0
75
A website template with multilevel dropdown menus and scrolling area.

469c1b7e-504e-11ed 9221-0e76797a4f7b

Scrollable Contacts List

3,059
0
38
Simulation of scrollable Contacts list using variables (Use of variables and 'On scroll Interactions')

34041018-d2c9-11ed 9221-0e76797a4f7b

e-Wallet

3,873
0
74
Swipe up and down to choose between cards Credits: Card designs used from: https://www.sketchappsources.com/free-source/2453-credit-card-designs-sketch-freebie-resource.html

2be093e4-504d-11ed 9221-0e76797a4f7b

It’s gradients, brought to life!

4,199
0
24
This prototype showcases a new Proto.io feature called Gradients, it’s a new way to create and animate gradients straight in Proto.io. You can now make your UI pop with vibrant linear or radial colors, and bring to life with beautiful animations.

Akis Ioannou

Calendar concept

10,002
2
626
A calendar picker concept based on Ramotion's example on Dribbble, https://dribbble.com/shots/1782092-Survey-Platform-Design

Alexis Piperides

Next