This is prototype was created for the Net magazine article "Design Prototypes That Reel Real - with Proto.io. It includes a step-by-step written tutorial with screenshots here: http://www.creativebloq.com/web-design/design-prototypes-feel-real-protoio-21619311 It's a product concept for juxtaposing two photos and typing a caption about the connection between them. It should look like this. The tutorial starts with bringing in a range of external assets. Then it'll show how to design assets and customize native components within the tool. Interactions will be triggered by gestures, keyboard input, and automatically as the prototype loads, then choreographed along an animation timeline. Enjoy... TAGS text input capture staggered animation variable variables show captured text input on different screen

Animated storyboard using low fidelity assets created in Proto.io, and icons found within the Proto.io library and Noun Project. The "On Screen Show" screen interaction is used to animate the content through a sequence of callbacks. See how this was made step-by-step in this webinar video on Low Fidelity prototyping: http://docs.proto.io/videos/low-fidelity-prototyping-with-proto-io/ TAGS: storyboard low fidelity auto-play

This prototype shows a common onboarding pattern with a series of 3 panels, each with a different background media (photo, looping video, and a GIF). TAGS: onboarding sync page controller looping video GIF

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

A beautifully animated Slide in Menu created exclusively with Proto.io. Feel free to import this fully editable project into your own account for use in your prototypes.

Done to explore setting colors with sliders and some Math expressions. Additional features, should anyone wish to build, would be to convert to HSV space, and to produce Hex color codes as well. To use colors, in the color controls of an element, replace the #XXXXXX hex code with this: rgb(255,125,45). Two swatches are provided, since color combinations are more interesting than single colors. Swatches are draggable.

Here is a prototype of a music player. Click play and add different sort of beats to the audio. Sample audio is from http://tricoolore.com/ Enjoy!

Demo