Knowledge UX Jobs at Google for Brooklyn Beta 2014

Lab, Projects | October 13, 2014 | Comment

BOUNCING BALL PROTOTYPE

WEBSITE

DESIGN

a1
a2
a3
a4
a5
a6

DESCRIPTION

A responsive website to submit a job opportunity to Google UX team for Brooklyn Beta 2014. It’s a simple website but we want to make something fun and interactive, so added a bouncing ball that you can tap or click, and it explodes with the Material Design circle effect. I’m using HTML5 Canvas drawing and it works well on mobile and tablet.

ROLE

  • Lead Developer

FFF now updated to support mobile devices!

Lab | April 6, 2014 | Comment

IMG_0637

Improve masking effect performance on mobile devices

Lab | February 12, 2014 | 1 Comment

If you want to make a masking animation on HTML, usually can make using height transition and overflow: hidden.
It’s fine on your desktop browser, but it’s not smooth on mobile devices.
The performance of animating some elements (such as width, height, left, top and margin..etc) are not that great on mobile devices.
The best things for smooth animation are CSS3 transitions, CSS3 3D transforms, Canvas Drawing and WebGL, because these things are using GPU acceleration.
I’ve tested three ways (Height, ScaleY, Translate) for smooth animations, you can see my demo at below url.
http://lab.cmiscm.com/masking/

1. Height animation

It’s very simple way for the masking animation.
But the performance is bad on mobile devices, the animation is not smooth.

RUNNING ON IPHONE
height
DEMO
CSS
HTML
JS

2. Scale animation

So what about using scaleY for the masking animation.
The performance is good, but the image is stretched little bit while animating.

RUNNING ON IPHONE
scale
DEMO
CSS
HTML
JS

3. Translate animation

Actually this is what I want to say at this article.
It only uses CSS transitions with two masking layers, and it’s super smooth on mobile devices.

RUNNING ON IPHONE

translate

LAYER DEPTH

masking

DEMO
CSS
HTML
JS