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
DEMO
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#masking { width: 100%; height: 80px; position: absolute; overflow: hidden; -webkit-transition-property: -webkit-transform, height; -webkit-transition-timing-function: cubic-bezier(.645,.045,.355,1); } #content { width: 100%; height: 100%; position: absolute; cursor: pointer; background-image: url(img.jpg); background-position: center center; -webkit-transition-property: -webkit-transform; -webkit-transition-timing-function: cubic-bezier(.645,.045,.355,1); } |
HTML
|
1 2 3 4 5 |
<div id="root"> <div id="masking"> <div id="content"></div> </div> </div> |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
var _stageW, _stageH, _maskingY, _isFull = false, $masking = document.getElementById('masking'), $content = document.getElementById('content'); window.addEventListener('resize', onResize, false); onResize(); function onResize() { var rect = document.body.getBoundingClientRect(); _stageW = rect.width; _stageH = rect.height; _maskingY = (_stageH - 80) / 2 | 0; $content.style.height = _stageH + 'px'; if (!_isFull) { $masking.style.webkitTransitionDuration = '0s'; $masking.style.webkitTransform = 'translate(0px, ' + _maskingY + 'px)'; $content.style.webkitTransitionDuration = '0s'; $content.style.webkitTransform = 'translate(0px, ' + -_maskingY + 'px)'; } } $masking.addEventListener('click', onClick, false); function onClick(e) { _isFull = !_isFull; $masking.style.webkitTransitionDuration = '0.3s'; $content.style.webkitTransitionDuration = '0.3s'; if (_isFull) { $masking.style.height = _stageH + 'px'; $masking.style.webkitTransform = 'translate(0px, ' + 0 + 'px)'; $content.style.webkitTransform = 'translate(0px, ' + 0 + 'px)'; } else { $masking.style.height = 80 + 'px'; $masking.style.webkitTransform = 'translate(0px, ' + _maskingY + 'px)'; $content.style.webkitTransform = 'translate(0px, ' + -_maskingY + 'px)'; } } |
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
DEMO
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#masking { width: 100%; height: 100%; position: absolute; overflow: hidden; -webkit-transition-property: -webkit-transform; -webkit-transition-timing-function: cubic-bezier(.645,.045,.355,1); } #content { width: 100%; height: 100%; position: absolute; cursor: pointer; background-image: url(img.jpg); background-position: center center; -webkit-transition-property: -webkit-transform; -webkit-transition-timing-function: cubic-bezier(.645,.045,.355,1); } |
HTML
|
1 2 3 4 5 |
<div id="root"> <div id="masking"> <div id="content"></div> </div> </div> |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
var _stageW, _stageH, _maskingScale, _contentScale, _isFull = false, $masking = document.getElementById('masking'), $content = document.getElementById('content'); window.addEventListener('resize', onResize, false); onResize(); function onResize() { var rect = document.body.getBoundingClientRect(); _stageW = rect.width; _stageH = rect.height; _maskingScale = 80 / _stageH; _contentScale = _stageH / 80; if (!_isFull) { $masking.style.webkitTransitionDuration = '0s'; $masking.style.webkitTransform = 'scaleY(' + _maskingScale + ')'; $content.style.webkitTransitionDuration = '0s'; $content.style.webkitTransform = 'scaleY(' + _contentScale + ')'; } } $masking.addEventListener('click', onClick, false); function onClick(e) { _isFull = !_isFull; $masking.style.webkitTransitionDuration = '0.3s'; $content.style.webkitTransitionDuration = '0.3s'; if (_isFull) { $masking.style.webkitTransform = 'scaleY(' + 1 + ')'; $content.style.webkitTransform = 'scaleY(' + 1 + ')'; } else { $masking.style.webkitTransform = 'scaleY(' + _maskingScale + ')'; $content.style.webkitTransform = 'scaleY(' + _contentScale + ')'; } } |
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.
DEMO
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#masking-1 { width: 100%; height: 100%; position: absolute; overflow: hidden; -webkit-transition-property: -webkit-transform; -webkit-transition-timing-function: cubic-bezier(.645,.045,.355,1); } #masking-2 { width: 100%; height: 100%; position: absolute; overflow: hidden; -webkit-transition-property: -webkit-transform; -webkit-transition-timing-function: cubic-bezier(.645,.045,.355,1); } #content { width: 100%; height: 100%; position: absolute; background-image: url(img.jpg); background-position: center center; cursor: pointer; -webkit-transition-property: -webkit-transform; -webkit-transition-timing-function: cubic-bezier(.645,.045,.355,1); } |
HTML
|
1 2 3 4 5 6 7 |
<div id="root"> <div id="masking-1"> <div id="masking-2"> <div id="content"></div> </div> </div> </div> |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
var _stageW, _stageH, _maskingY1, _maskingY2, _isFull = false, $masking1 = document.getElementById('masking-1'), $masking2 = document.getElementById('masking-2'), $content = document.getElementById('content'); window.addEventListener('resize', onResize, false); onResize(); function onResize() { var rect = document.body.getBoundingClientRect(); _stageW = rect.width; _stageH = rect.height; _maskingY1 = (_stageH - 80) / 2 | 0; _maskingY2 = -(_stageH - 80); if (!_isFull) { $masking1.style.webkitTransitionDuration = '0s'; $masking1.style.webkitTransform = 'translate(0px, ' + _maskingY1 + 'px)'; $masking2.style.webkitTransitionDuration = '0s'; $masking2.style.webkitTransform = 'translate(0px, ' + _maskingY2 + 'px)'; $content.style.webkitTransitionDuration = '0s'; $content.style.webkitTransform = 'translate(0px, ' + _maskingY1 + 'px)'; } } $content.addEventListener('click', onClick, false); function onClick(e) { _isFull = !_isFull; $masking1.style.webkitTransitionDuration = '0.3s'; $masking2.style.webkitTransitionDuration = '0.3s'; $content.style.webkitTransitionDuration = '0.3s'; if (_isFull) { $masking1.style.webkitTransform = 'translate(0px, ' + 0 + 'px)'; $masking2.style.webkitTransform = 'translate(0px, ' + 0 + 'px)'; $content.style.webkitTransform = 'translate(0px, ' + 0 + 'px)'; } else { $masking1.style.webkitTransform = 'translate(0px, ' + _maskingY1 + 'px)'; $masking2.style.webkitTransform = 'translate(0px, ' + _maskingY2 + 'px)'; $content.style.webkitTransform = 'translate(0px, ' + _maskingY1 + 'px)'; } } |