Submarine Animation

7,091
1
28
A basic animation created by using the Proto.io HTML Component with HTML and CSS. No additional images were needed to be imported to create this animation. The HTML and CSS used was found at: http://codepen.io/ajerez/pen/EaEEOW

Akis Ioannou

Tap to animate

3,849
0
68
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 the following interactions: Tap to rotate Tap to zoom in/out Tap and hold to transform.

f4ff2085-9250-11ed 9221-0e76797a4f7b

Android scrollable tabbar

4,419
0
115
Custom Android KitKat Scrollable Tabbar

Akis Ioannou

IFTTT

15,600
4
208
An as close as possible copy of the IFTTT onboarding experience. This prototype is also made in 4 other tools (Pixate, Origami, Framer & Form) to compare the differences between them. More info: http://medium.com/sketch-app-sources/five-app-prototyping-tools-compared-form-framer-origami-pixate-proto-io-c2acc9062c61 Original app: http://appstore.com/IFbyIFTTT

c6b28cc9-c0be-11ed 9221-0e76797a4f7b

Kost Mantan

1,083
0
0
Search your 2nd homelife

8114b5f9-504d-11ed 9221-0e76797a4f7b

Extended UI libraries

24,432
3
122
An extended collection of fully animatable UI libraries like triangles, stars, arrows and more, let you bring your idea to life all within Proto.io.

Akis Ioannou

iOS Weather App

3,559
1
124
This is the companion prototype to a 2-part tutorial where we explore the utilization of variables to help us to recreate Appleā€™s native iOS Weather app. In both tutorials, we go over the different ways Proto.io makes variables available to use in building your prototypes - from the simple example of setting a value in the variables manager and utilizing that value in the prototype to creating and setting a custom variable based on the property of a container and then to the more advanced usage of ternary operators to affect an outcome based on conditions surrounding that custom variable. http://docs.proto.io/videos/ios-weather-app-variables-tutorial-part-1/ http://docs.proto.io/videos/ios-weather-app-variables-tutorial-part-2/

dc4b62f6-ed80-11ed 9221-0e76797a4f7b

multiple slider test

1,712
2
A score based filter system that I hacked using variables. Each of the 10 cities is assigned a score for avg temperature, Taxes, and Cost of living, and when the sliders correspond to those values cumulatively, those cities show up on the map.

b5c076e7-504c-11ed 9221-0e76797a4f7b

Drag and Drop

4,707
0
79
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

Todd Siegel

Next