Zen Lattice Last Mile: CSS Cross Fade Animation

At the time I was struggling with the transitions in the mobile UI, my long time friend Tao visited Boston to push through a Kickstarter launch with his partners at Waylens. It was a happy coincident: I haven’t seen him for many years; when we were back in college, he was notorious for his meticulous attention to design details which drove anyone who teamed up with him crazy (I was once in that boat). But you know, we would still kill for a chance to team up with him for - of course - his impeccable quality of work. 

Many years have passed since the last time I was on the same team with him. This time, seeing him pulling off tons of all-nighters to prepare the launch reminds me of the old time. He hasn’t changed at all. Albeit that he’s now overseeing multiple aspects of a product launch, he’s still that same kid who would stubbornly stop the traffic if anything doesn’t meet his lofty standard. And now I know, this is a rare trait to have. When you’re under time pressure, over-promised scale, and everyone on your team is stressed out, it’s too easy to settle for the good-enough 99%. 

We didn’t have much time to hang out, but his presence in Boston somehow had the magic effect on me:

Good enough is not enough; don’t settle. 

So back to the Zen Lattice, I considered the possibility of wrapping all the UI into a mobile friendly version: collapsing the menu, using bigger buttons and sliders...

But then I was like, “Wait, but why? Why I want to do all the configurations from a mobile phone? What would be the purpose of viewing this on a mobile phone?” (One use case would be I’m hanging out with my friends and I just wanted to show it off but I don’t have a larger screen with me… lol)

For the rare case of viewing it on a mobile device, I decided to hide all the controls. It will be something like Zen state of mind, that’s hanging there and help with meditation… 

The configuration will be handled in a separate screen when the config button is clicked. So I wrote some basic media query for small screen size: switching between config screen and lattice screen; enlarged button/font sizes for touch screen... All very straight forward.

Except one small detail: I don’t like the rigid switch between the two screens. There’s no transition. It’s just turning on and off the “display: none;” property. 

I like to let CSS handle any transition or basic animation. The caveat is CSS can not transit “display” property from "none" to "visible. But it can do a transition of Opacity: 100% to 0%. The reason I can't just use Opacity is that, when an element's opacity is 0, it's still there. Any clickables are still clickable. So if I just fade out the opacity of the configuration screen, all the controls will still respond to any click event.

So at the time the button is clicked, a Javascript function will first trigger the fadeIn and fadeOut animation. Once the animation is done, then put the element's display property to none. Here's an example:

Phew! This is the end of the Zen Lattice series. Thanks for visiting!