This week’s Tumult Hype template is a quick guide on how to create a “reveal” effect. Sometimes, you might want to compare two objects. Perhaps picture #1 shows the outside of the human body and picture #2 shows what’s underneath. Perhaps the reveal picture shows undergarments, no clothing at all or an image of organs. Good web design can relate to many different professions. That’s why the “Reveal” template is handy. It shows how to create a common web effect with Hype – no custom JavaScript necessary.
By dragging the circular element, the bar can be moved left or right. Drag the controller to the left to reveal the happy emoji on the blue side or drag the controller to the right to show the angry emoji on the red side.
The key to this effect is the “On Drag” action. An element can be used to control the timeline. The “ellipse” element controls the “Main Timeline” by moving it forwards or backwards. The effect can be better controlled by managing the various options. The “Action” option is required though. It needs to be set to “Control Timeline” in order to control the timeline. This is not rocket science. The “Timeline” option allows you to pick the name of the timeline that you want to control. For this project, only one timeline is used – the “Main Timeline”. The “Axis” determines the direction of the reveal. It could move horizontally or vertically. (Create two “On Drag” actions, with two separate timelines, to create horizontal and vertical control.) The “Direction” is how the timeline is played, either forward or reverse.
While creating this project, I realized that I mixed-up the direction of the reveal. Instead of having to redesign my project, I simply used the “Reverse” option.
The “Speed” is tricky. Ideally, the elliptically shaped control should match the movement of the drag. This is different depending upon the size of your project. Additionally, the correct value could change if your project is scaled. That’s why the next option is interesting.
The “Continue after drag” option will play the timeline after the element is released. If there is an alignment issue, continuing the motion might prevent the user from getting frustrated. A swipe to the left or right will complete the animation. That’s up to you though. In this project, the setting is turned off.
To create the reveal, a “Group” is used. The “Content Overflow” is set to hidden. (This is in the “Metrics” section.) The reveal is simply the increase or decrease of the group’s width. The contents of the group are unchanged. That’s the secret to the effect. When the “Red Group” is at full width, the layer beneath is not seen. By decreasing the width of the group, the content beneath is revealed.
Once you understand the basics of this technique, the approach can be modified for other effects. Groups can be used to create floating menus, which could slide in from the sides. Slides in a presentation can appear or disappear – without having to change scenes. The “On Drag” could be used to control animation. It doesn’t just have to be a simple slide. Perhaps it’s a day and night cycle, where the sun is visible during the day and the stars / moon are visible during the night.
That’s what’s nice about Hype. It makes it easy to understand HTML5 animation, which can be difficult to code manually. If you want to test this out for yourself, loading up the Reveal Template is a way to check it out.