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.

Sliding

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

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

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.

Flipping

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

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.

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.

Rotation

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

Here’s the JavaScript

Let’s Take a Look at the CSS

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!

Share:
Share on Facebook5

Share on LinkedIn34Tweet about this on TwitterShare on Google+0Buffer this pageDigg thisShare on Reddit1

Leave a Reply

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

Most Popular Posts

How to set DirectoryIndex using .htaccess?

Posted on 2 years ago

Bhumi

Getting Started with CodeIgniter

Posted on 5 years ago

Bhumi

How to use jQuery Cookie

Posted on 4 years ago

Bhumi

How to use JavaScript Promise API?

Updated 17 years ago

Bhumi

What are Lambdas and Closures in PHP?

Updated 17 years ago

Bhumi

An Introduction to Gulp JS

Updated 1 month ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 4 years ago

Bhumi