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
1 2 3 4 5 6 7 8 9 | .page { 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.
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 | 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
Flipping is basically swiping the page on mobile devices. Here, some of the easy JavaScript is used for Android and iOS devices.
1 2 3 4 5 6 7 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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.
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
1 2 3 4 5 6 7 8 9 10 | <div id="front" class="normal"> ... </div> <div id="back" class="flipped"> <div id="contact-page" class="page"> <h1>Contact Page</h1> </div> </div> |
Here’s the JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /*----------------------------flip transition */ #back, #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!
