Mobile

If you've the need to support mobile-devices or rather touch-devices, you can't go crazy with the default setup. There're some things you've to keep in mind.

Creating mobilesites that are based on scroll-events is never a good idea! It's hard to get them cross-browser compatible and performance is a completely different point. Be clear about the pros and cons before.

Ok, enough... Let's do Transe 'n' Scroll!

---

#1st Transe has not touchhandler onboard, so you've to take one of the brilliant libraries out there. Here's a list, which I prefer (In the following steps we use scrollability):

• Scrollability
• iScroll
• Swiper

#2nd Include jQuery, Transe and the touch-scroll library you choosed:

<script src="jquery.js"></script>
<script src="jquery.transe.js"></script>
<script src="scrollability.js"></script>

Wrap the markup around your transformable elements, which is required by the touch-scroll library you've choosed and include the stylings for it if necessary.

<div id="container">
    <div id="page" class="scrollable vertical">
        <div class="we"></div>
        <div class="are"></div>
        <div class="transformable"></div>
   </div>
</div>

html {
    overflow: hidden;
    background: #333;
    font-family: Helvetica;
}

#container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    overflow: hidden;
}

#3rd Initialize Transe with the following setup:

// We override the plugin defaults globally
$.transe({
    container: $('#page'), // The container on which we've applied the touch-scroller
    offsetter: 'transform' // Based on what is used by the touch-scrolling library
});

// now instantiate it as usual
$('.we').transe({
    start: 0,
    end: 500,
    css: 'transform',
    from: 'rotate(0deg)',
    to: 'rotate(360deg)'
});
// and so on...