Google Inbox - compose animation

10,559
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

Boombox

3,573
3
27
A demo created using draggable and rotation features.

Akis Ioannou

Keezy App Animation

5,688
1
38
Tap/Hold the black circle to see the 2 state animation of the Keezy sound looping app. A circle of circular buttons spins out onto the expanded black circle that becomes the screen background. Once you're on this 2nd state, tap anywhere to return to the initial state. I recorded a webinar showing how to create this interactive animation: http://docs.proto.io/videos/re-creating-bespoke-interactive-animations-with-proto-io-2/ You can also find the assets here used for the prototype. Enjoy!

Todd Siegel

Expand container that moves adjacent content in sync

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

Todd Siegel

SpaceTrip Low-fidelity

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

SpaceTrip Medium-fidelity

3,096
0
10
Proto.io comes with UI libraries for iOS, Android Material Design, Windows and Apple WatchOS so that people can easily drag and drop those elements to bring their ideas to life. Simple interactions can also be applied, primarily screen-linking and basic navigation.

a03851e9-504c-11ed 9221-0e76797a4f7b

Menu Flyout Subtle Animation

3,283
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,015
2
485
This is an expand/collapse menu example that can be created using container states.

Akis Ioannou

Avatar fly-in subtle animation

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

Swarm Check-in

18,093
0
177
Apply color adjustments and filters to your prototypes to create beautiful interactions and animations. https://proto.io/en/new-features/adjustments-filters/

a03851e9-504c-11ed 9221-0e76797a4f7b

Next