Back to Top

HTML5 Transition for Optimizing Mobile Performance

HTML5 Transition for Optimizing Mobile Performance

Uneven page transitions, repeated refreshes and episodic delays in tapping are some of the common issues in mobile web development these days. Web Developers are looking forward to get closer to native, but often halted by resets, hacks and tough frameworks. HTML5 transition solve all the issues.

In this tutorial, we are going to discuss how to develop a lag-free mobile web app based on HTML5. First of all, we are trying to reveal the problems in modern mobile frameworks. With core HTML5 APIs, you are going to check out a minimalistic approach and some of the basics to help you create your own framework or match up with the one you use currently.

Hardware Acceleration

Basically, GPUs are known to handle detailed CAD diagrams or 3D modeling. In that case, our backgrounds, text and drop shadows, divs, images etc. should animate well and smooth through GPU. Sadly, a lot of front-end developers are dishing this process of animation away to the third party framework without getting worried of semantics. Here’s why these features should be covered –

  • Power Consumption – When it comes to mobile app development, developers have to consider different types of device constraints when writing web apps. It becomes even more prevalent because browser makers allow access to more number of device hardware.
  • Conflicts – When it came to apply hardware acceleration to the pages which were accelerated already, we promoted glitchy behavior. So, it is very important for you to find out if you have overlapping acceleration.
  • Computation Load and Memory Acceleration –When it comes to composite each element in DOM for hardware acceleration, another person working for your code may beat you and chase you down seriously.

To make interaction as close and smooth to native as we can, it is important to make browser work. Basically, we have to set up initial animation for the mobile device CPU and get the GPU ready to composite various layers during animation process. This is something scale3d, translate3d and translateZ do. This way, they provide their own layer to the animated elements and let the device render everything eventually.

HTML5 Page Transitions

Today, we are going to discuss three of the most widely used HTML5 Page Transition approaches to develop mobile app – Slide, Flip and Rotation. Each animation takes only 3 to 4 lines of JavaScript and CSS.


It is one of the most common HTML5 transition approaches. It gives the native feel of mobile apps. It brings a new content area in the port. First of all, let’s declare the markup for slide effect

Home Page

Products Page

About Page

Consider this idea of staging the pages right or left. You can choose any direction. With just a few CSS lines, we have both hardware acceleration and animation. Now you can swap classes on div elements to let the animation begin

.page {
	position: absolute;
	width: 100%;
	height: 100%;
	/*activate the GPU for compositing each page */
	-webkit-transform: translate3d(0, 0, 0);

translate3d(0,0,0) is actually a ‘silver bullet’ method. When a navigation element is clicked, this JavaScript will be started to swap the classes. We are not going to use any third-party framework.

function getElement(id) {
	return document.getElementById(id);
function slideTo(id) {
	//1.) the page we are bringing into focus dictates how
	// the current page will exit. So let's see what classes
	// our incoming page is using. We know it will have stage[right|left|etc...]
	var classes = getElement(id).className.split('');

	//2.) decide if the incoming page is assigned to right or left
	// (-1 if no match)
	var stageType = classes.indexOf('stage-left');

	//3.) on initial page load focusPage is null, so we need
	// to set the default page which we're currently seeing.
	if (FOCUS_PAGE == null) {
		// use home page
		FOCUS_PAGE = getElement('home-page');

	//4.) decide how this focused page should exit.
	if (stageType > 0) {
		FOCUS_PAGE.className = 'page transition stage-right';
	} else {
		FOCUS_PAGE.className = 'page transition stage-left';

	//5. refresh/set the global variable
	FOCUS_PAGE = getElement(id);

	//6. Bring in the new page.
	FOCUS_PAGE.className = 'page transition stage-center';


Flipping is basically swiping the page on mobile devices. Here, some of the easy JavaScript is used for Android and iOS devices.

function pageMove(event) {
	// get position after transform
	var curTransform = new WebKitCSSMatrix(window.getComputedStyle(page).webkitTransform);
	var pagePosition = curTransform.m41;

As we are going to use CSS3 ease-out transition, the common element.offsetLeft won’t work. We are going to find out the direction user is going to flip and let the page navigation to start.

if (pagePosition >= 0) {
	//moving current page to the right
	//so means we're flipping backwards
	if ((pagePosition > pageFlipThreshold) || (swipeTime < swipeThreshold)) {
		//user wants to go backward
		slideDirection = 'right';
	} else {
		slideDirection = null;
} else {
	//current page is sliding to the left
	if ((swipeTime < swipeThreshold) || (pagePosition < pageFlipThreshold)) {
		//user wants to go forward
		slideDirection = 'left';
	} else {
		slideDirection = null;

You will also be able to measure the swipeTime in milliseconds. This way, navigation can start if user swips the screen quickly to turn the page.


It’s the time to have an insight at rotate animation. You can easily rotate the page anytime to 180 degrees to show the reverse side by just tapping “Contact” option. It just takes a few CSS lines and some sort of JavaScript to assign onclick transition class.

Keep in mind that the transition “rotate” is not rendered well on several Android versions as it doesn’t have capabilities of 3D CSS transformation. Rather than skipping the flip, the page “cartwheel” is made by Android instead of flipping. So, it is better to use this transition carefully until it improves the support.

Basic “front” and “back” concept


Contact Page

Here’s the JavaScript

function flip(id) {
	// get a handle on the flippable region
	var front = getElement('front');
	var back = getElement('back');

	// again, just a simple way to see what the state is
	var classes = front.className.split('');
	var flipped = classes.indexOf('flipped');

	if (flipped >= 0) {
		// already flipped, so return to original
		front.className = 'normal';
		back.className = 'flipped';
		FLIPPED = false;
	} else {
		// do the flip
		front.className = 'flipped';
		back.className = 'normal';
		FLIPPED = true;

Let’s Take a Look at the CSS

/*----------------------------flip transition */
#front {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	-webkit-transition-duration: .5s;
	-webkit-transform-style: preserve-3d;

.normal {
	-webkit-transform: rotateY(0deg);

.flipped {
	-webkit-user-select: element;
	-webkit-transform: rotateY(180deg);

I would love to hear your experience of HTML5 transition. What are your thoughts on HTML5 transition optimization improvement? Let me know in the comments!

Like this write-up? Share this article with your friends on Facebook, Twitter, and Google Plus!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to set a Cookie in PHP

Posted on 7 years ago


Run-Time Validation using jQuery

Posted on 5 years ago


Angularjs 2 Tutorial for Beginners

Posted on 2 years ago


Hello world

Updated 5 days ago

Nick Carter

In depth Understanding of Laravel Core

Updated 2 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 4 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 5 years ago