Studio 12

Transition exercise

We will work on making a popup that smoothly appears when you focus a text input above it is focused:

Start by forking this pen.

As the code currently stands, the popup appears and disappears instantly. Use the transition property to make it animate smoothly. Note that display is not animatable, so the transition property will do nothing with the current code. You can use a tranform to scale it down to 0, then a transition from that will make it appear to grow. Do not use a very long duration as that can make a UI feel sluggish. As a rule of thumb, avoid durations longer than 400ms (0.4s)

Step 2: Fix the transform to make it grow from its pointer

The popup currently grows from its center, which looks a bit weird. Use the transform-origin property to make it grow from the tip of the pointer instead.

Do not eyeball this; look at the CSS creating the pointer and calculate what the offsets should be. The diagram below may be helpful:

where:

p_l is the pointer left offset
p_w is the pointer width
p_h is the pointer height

Keep in mind that when specifying a transform origin, that to go higher or to the left of the element, you need to use negative values.

Step 3: Make it bounce!

We currently have a pretty decent transition:

We can go a step further and make it bounce at the end, to make it feel more alive and playful.

Use cubic-bezier.com to create a bezier curve that bounces at the end (i.e. the y value goes beyond 100%, then comes back to 100%). The exact curve is up to you.

Step 4: Make it bounce only when it appears

Some of you will not have this problem, as it depends on how you wrote your CSS. In that case, you have nothing to fix!

Play a little with your transition. Especially if you use an intense bounce, you get a weird artifact when the popup disappears: it shrinks to 0, then grows a little bit on the other side of the screen, then disappears entirely. This is because your timing function is applied on both states: normally when growing, and in reverse when shrinking, so you get a "bounce" when shrinking too!

To fix this, you should only apply your timing function when the popup appears, not when it disappears. If input:not(:focus) + .popup hides our popup, what selector would select it only when it appears?

User Testing

We will provide you with a spreadsheet where you should place your name and a link to your chat app. Once you have all added yourselves to this directory, we are going to shuffle the directory and pair you up to do user testing and design critique of each other's apps. Start with user testing, similar to how we did with paper prototyping only now you no longer need to act as the computer. Instead, you can act as the user on the other end of the app! Make sure you can talk to one another through the app while you are doing this.

In addition to being a user, you must also be the facilitator and observer of your user study. As always be concious of which "hat" you are wearing.

When you are both done with user testing, you can start the design critique of each other's apps.