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

'Space tourism for everyone' “Earth is a small town with many neighborhoods in a very big universe.” ― Ron Garan Hey, here is my prototype which I made using Proto.io. Imagine that one day we all will be able to become space travellers.

upapf

Project using Variables to simulate Drag and Drop to Snap functionality into a predefined area. While also adding Animations and States for a more smooth and elegant process.

Drag and Drop an avatar over a target area that animates when in the drop zone. When released outside the target drop zone, it returns to the original location. Uses a variable to define the target drop zone, that then triggers animations in the zone and when dropped. See how it was made step by step in the webinar video: https://support.proto.io/hc/en-us/articles/115000637591-Advanced-Scrolling-Dragging TAGS: drag and drop dragging variables variable animations on drop animation

Spoon is a dating app concept aiming to make online dating more efficient, and fair. The concept has the following main characteristics: 1) Gender equality ⁠— the app decides who makes the first move; 2) Time efficiency — no need to put in hours of work to meet somebody; 3) Incremental steps towards a clear goal — no limbo states, no endless/goalless swiping; 4) Fairness, respect, and accountability for its users — choosing someone means you commit resources to that person, no second thoughts allowed; 5) Match exclusivity — chat with only one person at a time; no competing for one’s attention; 6) Fast and fluid interactions — chat while both users are online and active, no offline messages. I hope you like it.

This is a prototype that demonstrates you some of the capabilities of Proto.io. You are welcome to import this project and use these interactions in your prototypes. In this prototype you will see drag animations in all directions.

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

A simple implementation of how to simulate a Dynamic List which the user can manually increase or decrease using a single Container, a List component and States.