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.
This prototype showcases a new Proto.io feature called Gradients, it’s a new way to create and animate gradients straight in Proto.io. You can now make your UI pop with vibrant linear or radial colors, and bring to life with beautiful animations.
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:
This project is inspired by Vasjen Katro’s concept ‘Clubbing & Nightlife’ App ‘2Night’. It showcases how Proto.io can be used to create a beautiful parallax scrolling effect. If you’d like to find out how I achieved this effect feel free to import the project into your own account for reverse engineering.