Animations

How to use built-in animations and make your own

Animations

By default, jQTouch comes with 8 page animations: slide, slideup, dissolve, fade, flip, pop, swap, and cube. The links which cause these animations to occur can be customized via their corresponding initialization options (default values shown below):

• slideSelector: 'body > * > ul li a'
• slideupSelector: '.slideup'
• dissolveSelector: '.dissolve'
• fadeSelector: '.fade'
• flipSelector: '.flip'
• popSelector: '.pop'
• swapSelector: '.swap'
• cubeSelector: '.cube'
• backSelector: '.back, .cancel, .goback'

How Animations Work

It is important to note that all animations are handled with CSS3 and classes. Each time the user navigates to a new page, two animations occur: The new page animating in and the old page animating out. The classes which are applied during an animation are:

• <div id="#oldpage" class="_transitionname_ out">
• <div id="#newpage" class="_transitionname_ in">

Adding Custom Animations

Adding your own animations is straight-forward. Just add the corresponding class definitions (using CSS3 keyframe animations), and add the animation with the corresponding public function. Here's an example of adding a custom "reveal" animation, where the new page slides in overtop of the old page.

<script>
    var jQT = new $.jQTouch();

    $(function(){
        jQT.addAnimation({
            name: 'reveal',
            selector: '.revealme'
        });
    });
</script>
<style>
    .reveal.in {
        -webkit-animation-name: dontmove;
        z-index: 0;
    }

    .reveal.out {
        -webkit-animation-name: revealout;
        z-index: 10;
    }

    .reveal.out.reverse {
        z-index: 0;
        -webkit-animation-name: dontmove;
    }

    .reveal.in.reverse {
        z-index: 10;
        -webkit-animation-name: revealin;
    }


    @-webkit-keyframes revealin {
        from { -webkit-transform: translateX(100%); }
        to { -webkit-transform: translateX(0); }
    }

    @-webkit-keyframes revealout {
        from { -webkit-transform: translateX(0); }
        to { -webkit-transform: translateX(100%); }
    }
</style>

You will note we're using a built-in animation "dontmove" on pages which are stationary during the transition. This is important, as it means an animation is still technically running on the object (so callback functions still work).

Disabling Animations

Passing 'useAnimations: false' will disable all animations, swapping views instantly -- though still using the same selectors listed above.