JavaScript animation tutorial using jQuery Tranist

JQuery transit is included in every Playground build template by default. It's our preferred animation library to be used within The Playground. It's very easy to learn and animate objects quickly while being performant cross browser on mobile devices. All of our custom ads in the showcase are built using Transit. 

The library itself has extensive documentation but we've built a Basic Super Skin and animated the Playground within the build below for you to experience and play with.

Have a play

http://create.playground.xyz/xufoyu/23/edit?js,output

Further reading

When animating in The Playground make sure your animation happens inside the right function. In most cases this will be the onlaunch function. Unlike working on a webpage, when working in the Playground you have to reference the iframe containing the element you want to reference. Eg:

$('#box').show();

Does not work.

$('#box', docs.hero).show();

Works. 

You can find a full list of jquery selectors/iframe mappings here.

Usage

Usage is simple. It follows the order of

1. Selecting the object to animate
2. Providing the CSS properties to animate
3. Providing the new values to animate to
4. Optionally providing a duration for the animation
5. Optionally providing an easing method for the animation

So in it's simplest form it looks something like:

$('#box', docs.hero).transition({x:200});

This would move the image with an ID of box 200 pixels to the right with default timing and easing.

$('#box', docs.hero).transition({x:200}, 2000, 'ease-out);

This would move the image with an ID of box 200 pixels to the right over 2 seconds and would ease out. You can review a full list of available easing options on the library homepage. 

If you want to trigger another animation once the event has finished you can chain them. Eg;

$('#box', docs.hero).transition({x:200}).transition({x:0});

This would send the box 200 pixels to the right, then animate back to 0.