Expand container that moves adjacent content in sync

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

Todd Siegel

Color Picker

3,007
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

SpaceTrip Low-fidelity

3,304
0
2
Basic shapes like rectangles, lines, circles, text and more are available and they can be dropped on the canvas to create the very first draft of a mobile app in order to demonstrate the flow and functionality of the app.

a03851e9-504c-11ed 9221-0e76797a4f7b

Pandora

4,500
0
43
This prototype is a simulation of one part of the Pandora iPhone app. I have chosen to simulate the part of the app where the user selects a Pandora radio station and then proceeds to select that station. What I have demonstrated is how how the radio station animates from a small entry on a list to a large full screen entry and vice versa. If you would like to see how I created this prototype, please watch this video tutorial here: http://docs.proto.io/videos/pandora-tutorial-part-1/

8ea06e34-504c-11ed 9221-0e76797a4f7b

Menu Flyout Subtle Animation

3,883
1
56
Re-creation of the apple.com mobile site flyout menu with subtle animations. See how it was re-created step-by-step: http://docs.proto.io/videos/prototyping-subtle-animation/ Enjoy.

Todd Siegel

Expand/Collapse Menu

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

Akis Ioannou

Avatar fly-in subtle animation

3,335
1
17
This prototype shows a subtle animation of avatars flying in, and subtle background tint changes. See how it was created step-by-step: http://docs.proto.io/videos/prototyping-subtle-animation/ >starting at time: 28:40 Enjoy...

Todd Siegel

Copy of Tinsel

1,809
0
18
Streamlined UI/UX adjustments.

0902b455-64f2-11ee ab6d-0e76797a4f7b

Get the position of a scrolling container

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

Menu Overlay Animation - Google Calendar for iOS

6,985
0
167
Prototype of the Material Design menu animation of Google Calendar for iOS. See how it was created step-by-step in the video of the webinar "Adaptive Prototypes & Material Design UI Library" http://docs.proto.io/videos/adaptive-prototypes-material-design-ui-library/ Skip to minute 35:14 of the webinar to specifically see this prototype being made. TAGS: material design google iOS calendar Enjoy.

Todd Siegel

Next