Flipboard Animation

5,373
1
56
The Flipboard animation created using states.

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

Instagram Pull to Refresh

5,012
3
313
A simple implementation of Pull to Refresh

92f2b218-504c-11ed 9221-0e76797a4f7b

HitchQuote

3,428
1
21
HitchQuote is a simple prototyping application that gives the opportunity to user to share quotes with a tap. Every feedback is welcome!

f4ff2085-9250-11ed 9221-0e76797a4f7b

Spotify

23,099
6
630
Hi there! I would like to share with you the latest version of Spotify prototype. Now you can listen to music while browsing the prototype.

f4ff2085-9250-11ed 9221-0e76797a4f7b

Museum_App

1,394
0
16
For TelerikNEXT workshop

ba1a6428-504c-11ed 9221-0e76797a4f7b

Expand container that moves adjacent content in sync

3,205
3
55
This simple prototype demonstrates how have a container expand and collapse while moving adjacent content in sync.

Todd Siegel

Color Picker

2,586
1
8
Here's a demo showing a basic color picker using a container with 4 states for both the colored star and the color swatches.

Todd Siegel

Pro Tips & Tricks

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

Hide Navigation Bar On Scroll

5,309
4
177
This is an example of a Navigation Bar that disappears on any downward scroll and re-appears on on any upward scroll.

Akis Ioannou

Next