Question

I am trying to build a swipe menu for the ipad where a swipe will result in the content from the next menupoint will push the current content out.

However, with barely no content (or just images in divs) it’s very fluent. But as soon as I introduce a more compliated DOM it’s sluggish in chrome with touch enabled, and unusable on the ipad3 and ipad2.

I’ve used the transform: translate3d to enabled hardware acceleration, but it just doesn’t seem to cut it. Are there any other way to improve performance. I’ve seen some websites that presents quite a lot of content with a very fluid swipe animation (eg. The Mobile Playbook), but I can’t get that same feel.

I’ve used the jquery.event.swipe plugin to introduce a code in this format :

 $(document).ready(function(){
    var $swipeArea = $("#swipeBox"),
        $pages = $swipeArea.find(".page"),
        $currentPage = $(".currentPage"),
        index = $pages.index($currentPage),
        width = $swipeArea.width();

    $swipeArea
    .on('swipeleft', function(e){
        if(index == $pages.length - 1 ) { return; }
        $pages.eq(index+1).trigger('switchPage');
    })
    .on('swiperight', function(e){
        if(index == 0) { return; }
        $pages.eq(index-1).trigger('switchPage');
    })
    .on('switchPage', function(e){
        $pages.eq(index).removeClass("currentPage");
        $(e.target).addClass("currentPage");
        index = $pages.index($(e.target))
    });

Using this css:

.swipeContentArea .page{
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   -o-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
   position:absolute;
   left:-100%;
   height:100%;
   z-index:1;
   overflow-x:hidden;
} 
.swipeContentArea .page.currentPage{
   left:0;
   z-index:2;
}
.swipeContentArea .page.currentPage ~ .page {
   left:100%;
}

with

  transition-property: left,height;
  transition-duration: 600ms;

on the swipeArea for the css transitions.

Answer 1

I may be wrong, but setting a left (and animating it) differs entirely from translate3d: left is not hardware accelerated, while translate3d is. Which is probably why it is not running smoothly.

translate3d requires parameters in x, y and z form. x being the horizontal axis, y the vertical and z the ‘depth’ axis, if you will. I ran in to a similar case a while ago and created a simple jquery function that would calculate the width of my sliding element (in your case; the next page), and set a translate3d style with either a negative (element moves left) or positive (element moves right) value for x on that element.

Say your sliding element is 1200px wide, you would animate it by setting its style like this:

1. the element is the next page: translate3d(1200px,0px,0px)
2. the element is the current page: translate3d(0px,0px,0px)
3. the element is the previous page: translate3d(-1200px,0px,0px)

(don’t forget to incorporate margins, if the element has them. Just add them to the x value)

Here is more on CSS (3d) transforms