Pro Tips & Tricks

4,143
0
39
Here is the set of prototypes from the Pro Tips and Tricks webinar: 1) Propagate Events to Items Below 2) Containers as Symbols 3) Conditional Animation 4) Screen Interaction 5) Sketches into Prototype Here is the video of the webinar: http://docs.proto.io/videos/pro-tips-tricks/ The video is broken down with time-codes on Vimeo here: https://vimeo.com/103316955 (under read more) They are also below. Enjoy... > Create popover menu with click through to icon below 4:08 > Propagate all events to the item below 4:08 > Using containers as symbols for efficiency (navigation assets etc.) 11:59 > Customizing a navbar component 14:55 > Customize a tabbar component 16:48 > Convert navbar to a container to repeat (as symbol) 19:10 > Convert tabbar to a container to repeat (as symbol) 19:43 > Convert text box to a container to repeat (as symbol) 19:49 > Using a container to create change font style for repeated Titles and labels. 21:55 > Conditional animations triggered by drag gesture using variables (mailbox swipe). 23:04 > Adding containers to canvas 24:44 > Using the draggable gesture 25:25 > Variable Manager 26:00 > Using onDrag variable to change an objects opacity 26:38 > Range of property values that can be changed based on a drag gesture 27:45 > Capturing the X position from dragging an object using a variable 27:57 > Creating a new value if/then argument using shorthand javascript to change opacity using a variable. 29:00 > Creating a callback to the change a property that reads from a variable. 29:52 > Using the onDragEnd gesture 30:33 > Change the Left property using a variable triggered by onDragEnd 30:49 > See range of properties that can be changed from onDragEnd gesture. 31:04 > Using On Screen Show Interaction for creating an automatically cycling carousel. 35:25 > Importing paper sketches (photos of them) to use as background for layering assets and interactions. 40:28 > Toggling between a sketch and your higher fidelity mockup using states. 44:25 > Duplicating interactions between states 45:18

Todd Siegel

Parallax - Yahoo Weather

3,173
0
35
Re-creation of the horizontal swipe parallax effect in Yahoo Weather. See how it was created step-by-step in this webinar: https://support.proto.io/hc/en-us/articles/223073307-Prototyping-parallax-effects TAGS: parallax variables variable

Todd Siegel

Clubbing and Nightlife

5,949
1
118
This project is inspired by Vasjen Katro’s concept ‘Clubbing & Nightlife’ App ‘2Night’. It showcases how Proto.io can be used to create a beautiful parallax scrolling effect. If you’d like to find out how I achieved this effect feel free to import the project into your own account for reverse engineering. https://dribbble.com/shots/2041810-City-intro-animation

Christos Chatzikkos

GrabPay Design iOS App - by QuocHieu

1,525
0
Grab Pay Concept App QuocHieu-Oct2016. Email:hieubui.fsb@gmail.com Phone: 0965.292.48.chin Skype: hieubui.fsb

539461da-504d-11ed 9221-0e76797a4f7b

Hi Homie App Mockup Concept- by QuocHieu

2,694
1
Email:hieubui.fsb@gmail.com Phone: 0965.292.48.chin Skype: hieubui.fsb

539461da-504d-11ed 9221-0e76797a4f7b

Modo Driver Music for Android - By QuocHieu

1,268
0
Email:hieubui.fsb@gmail.com Phone: 0965.292.48.chin Skype: hieubui.fsb

539461da-504d-11ed 9221-0e76797a4f7b

Map Based Geo Fencing Project

1,291
0
5
Basic prototype for a Map Based Geo Fencing App, created for a class, uploading for other members of the group.

b6497e74-504d-11ed 9221-0e76797a4f7b

Sign up - Sign in

6,050
6
485
A Sign up - Sign in page example project using Variables and States to validate the correct user input in both pages.

Constantinos Thoma

Porsche 911 Carrera S

1,869
0
Porsche 911 Carrera S Configurator example

34041018-d2c9-11ed 9221-0e76797a4f7b

Bungee jump animation with custom easings

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

Christos Chatzikkos

Next