Flipboard Animation

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

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

Football Team Formations

1,470
0
I'm going to give you an explanation of the best modern football formations. A football formation is a number set that describes the positions of players on the field. It determines how many players play on defense, the midfield, and the frontline. The first number always describes the defender, and so on. For example, a formation like 4-3-3 plays with four defenders, three midfielders, and three forwards. The goalkeeper is never mentioned in a football formation. Most formations are described in three numbers but four- and five-rank formations are also possible. This is created in Proto.io using States and States Animations.

Paul Baker

Safe/Combination lock

2,487
0
17
Safe/Combination lock

Moiraine Damodred

Emoji Toggle Component

1,041
0
8
Mouse over and out to toggle between the active and inactive state. Click to select the active state, click again to deselect. Showcases the power of containers in Proto.io. Each emoji is converted into a container (through the right-click menu). The individual emoji containers have two states: selected and deselected. The parent container contains all the emoji containers. This parent container has 6 states: non-selected, and the active state for each emoji (5). The click/tap trigger changes the both the individual emoji state, and respective parent container state to the active emoji. Easily change the emojis to any other one you choose while maintaining all the interactions. Make sure to click into each individual emoji container and double-click the current emoji and replace the image with the new one from the asset library. Replacing the image by double-clicking the existing one preserves the grayscale in the deselected state. Enjoy!

Todd Siegel

Login Website

821
0
28
Graphics & Credit from: https://www.sketchappsources.com/free-source/3805-clean-web-login-form-sketch-freebie-resource.html. A simple Login page of a webpage using interactive Proto.io components.

1862c716-504d-11ed 9221-0e76797a4f7b

Light Switch

1,287
0
10
Using variables to change the opacity of items Design Downloaded from: https://www.sketchappsources.com/free-source/2567-chandelier-lighting-illustration-sketch-freebie-resource.html

Paul Baker

Tik Tok

1,681
0
14
Tik Tok project (Part 1) The videos in the project have been downloaded from: https://www.pexels.com/videos/ https://www.pexels.com/video/close-up-of-wheat-in-field-9917770/ https://www.pexels.com/video/moving-pages-of-books-8994820/ https://www.pexels.com/video/woman-with-freckles-on-her-face-looking-at-the-camera-8055998/ https://www.pexels.com/video/portrait-of-a-beautiful-young-woman-8056090/

17056140-504e-11ed 9221-0e76797a4f7b

Material Design Dashboard

1,835
0
42
A prototype of the admin-panel dashboard of e-shop software, built with Proto.io’s Material Design library. The prototype uses containers and states to create a highly interactive, single-page dashboard.

Akis Ioannou

Next