Visit the Alps

3,854
0
61
This prototype is designed to be a promotional website for the Alps and features animations based on the scroll position. Thanks to https://dribbble.com/victorerixon for the inspiration.

Vasilis Odysseos

Header change on Scroll

2,859
0
77
Change of the header according to scroll position of content.

2cf05637-cc17-11ef a04a-0e3ec7c5f8cf

Expand/Collapse Menu

7,732
2
489
This is an expand/collapse menu example that can be created using container states.

Akis Ioannou

It’s gradients, brought to life!

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

Get the position of a scrolling container

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

Form examples

8,186
0
165
3 prototypes showing different uses of the form components for iOS 1) Activate / de-activate button when checking / un-checking Terms of Service 2) Capture text input to change property 3) Change number of tickets - limit 8 See how they were created step-by-step in the Using Forms webinar video: https://vimeo.com/118919393 This version on Vimeo includes time-codes so you can jump to particular sub-sections (repeated below as a preview): > Range of iOS form input controls 2:02 > Labels 2:17 > Text fields 2:32 > Setting placeholder text 3:04 > 5 Input Types that display the appropriate iOS keyboard (Text, Numeric, Email, Password, Telephone) 3:30 > Using the Telephone keyboard for credit card number input (large # keys) 4:08 > Need to view prototype on device in order to see the range of keyboards 5:59 > Multi-line text area input field 6:24 > Search Bar 6:40 > Checkbox control customization 7:22 > On/Off Switch control customization 7:52 > Slider control customization 9:27 > Increasing size of slider handle 9:47 > Picker Wheel Customization 10:00 > Prototype example: Activate button when checking terms of service 10:42 > Create a button with two states (using convert to container) 12:55 > Adding interactions to a checkbox control (on change activation/deactivation) 14:45 > Definition of variable and range of uses 17:04 > Using variables with text field interactions 18:25 > Prototype Example: Using a variable to capture text input and show it in a different text box using change property. 23:27 > Prototype: Use variables to increment and decrement counter showing number of tickets being purchased. 28:40 > Searching full range of icons built into Proto.io 29:10 > Using a variable to limit the range of tickets (0 to 8) 32:46 > Copying and pasting interactions with Variables 40:08

Todd Siegel

Halloween Cards Onboarding

3,229
0
48
Since Halloween is coming up I created this project using Proto.io's free Halloween icon pack. I simple onboarding process using scrollable containers with on swipe interactions.

71ffbe0d-9b82-11f0 ad7f-0e3ec7c5f8cf

Website Template

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

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

Clean Product Card Carousel

2,734
0
18
A clean product card carousel as seen on: https://www.sketchappsources.com/free-source/3173-product-card-view-sketch-freebie-resource.html Infinite loop scrolling added

1f83aed2-504d-11ed 9221-0e76797a4f7b

Next