Smart Home - High Fidelity

2,623
1
44
The SmartHome prototype is a high fidelity prototype that was build by using mostly components, graphics and animations from Proto.io Please go ahead an try it out. Prepare a hot cappuccino for yourself or even better arm your home alarm directly through the SmartHome app. Control all your smart devices fast, easy and reliably through the app! Includes: Multiple containers, states and states transitions, on screen interactions, on state enter interactions and much more. Multiple proto.io animations Bodymovin animations Battery level for the coffeemaker is dynamic by getting the minutes of the current time and updating the battery level percentage. A couple of variables In overall, this is a great project for users that want to expand their proto.io knowledge and move to medium and high fidelity prototyping. Feel free to import!

bbac9ce3-504c-11ed 9221-0e76797a4f7b

Flipboard Animation

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

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

Endangered Species

3,570
1
An endangered species is a type of organism that is threatened by extinction. Species become endangered for two main reasons: loss of habitat and loss of genetic variation.

Merry Mustard

Avatar fly-in subtle animation

2,915
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

iOS Spotlight

25,745
0
79
Using color adjustment and filters, I've simulated the iOS spotlight animation. Learn how you can apply these filters at https://proto.io/en/new-features/adjustments-filters/

a03851e9-504c-11ed 9221-0e76797a4f7b

"Finding Giannis"

1,542
0
3
A tribute to Giannis Antetokounmpo by using some smooth state transitions in Proto and the "Finding Giannis" video by TNT. Wallpaper by https://lleytonjackson.weebly.com/ Youtube Video: "Finding Giannis" by NBA on TNT https://www.youtube.com/watch?v=HrCU305tzmM

bbac9ce3-504c-11ed 9221-0e76797a4f7b

Google Inbox - compose animation

10,802
5
286
The recently released Google Inbox app is a re-thinking of the email inbox experience that beautifully demonstrates Google's material design interactive animation language. This prototype focuses on the compose button's animation. Click the + to reveal a new state where a wave of buttons and labels float up, and the + becomes a pencil icon. It uses two states, with staggered animations.

Todd Siegel

Get the position of a scrolling container

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

Next