Tutorial Series: Using Fade and Hide

Part 1: How to Fade In an Item When the Screen Shows

Using the Proto.io web prototyping tool for mobile devices and tablets, this video series demonstrates various tips and tricks using hide and fade to make your Proto.io prototypes more polished and professional.

This video is Part 1 of the “Fade and Hide” tutorial series where I’ll show you how to fade in an item when the screen shows. The delay for the fade can be set to anything you like as well as the duration of the fade in itself. This is a useful technique that can add a lot of polish and sophistication to your prototype. I use this for tool-tips mostly when I have critical information I want to convey to the user.

Part 2: How to Fade Out an Item When Tapped

This video is Part 2 of the “Fade and Hide” tutorial series where I’ll show you how to fade out an item when tapped. I use this mainly for tool-tips but it can be used for any on screen item. This technique is used when you have items that are temporarily occupying valuable screen real estate and it gives the user the ability to make the item fade out when they tap on the item itself.

Part 2: How to Fade Out an Item When Tapped

This video is Part 3 of the “Fade and Hide” tutorial series where I’ll show you how to fade out an item when you swipe a scrollable container. This is a continuation of the same technique that I used in part 2 of this video series. Proto.io allows you to specify which direction you are swiping which is great for making bottom menus vanish and expanding screen real estate when a user is scrolling vertical containers.

Pro Tip: For example, when the user is scrolling a vertical menu upwards the bottom menu can be faded out. If the user scrolls in the opposite menu the bottom menu can be faded back in.

Protonerds Can Help

Alex Mickus ProtoNerdsWe are experienced Proto.io prototypers with thousands of hours designing and scripting prototypes and top rated video games. Hire us and put our years of experience to work for you. Let us turn your vision into an amazing high fidelity prototype that will get you noticed.

Select the button below to get started.