Purchase for only $9

on Codecanyon


This section is itended for expert users, or anyone else that would like to develop their own transitions and themes for the ShowUp. The basic usage of existing themes, which you should know before making your own extensions, can be found on Transitions and Themes pages.

Making a Custom Transition

The way to make a new transition is to create a new file, showup.yourTransitionName.js, in the transitions folder of the showup installation folder (where the default transitions are already placed). The code in the file should add a new member to the ShowUpTransition object (with the same name as your transition) by extending the ShowUpTransition._defaultTransition transition, like this:

<code> ShowUpTransition.yourTransitionName = jQuery.extend({}, ShowUpTransition._defaultTransition, {

The three mandatory members of your transition object must be: options (hash), setDefaults (function), and apply (function), which will overwrite the corresponding members of the _defaultTransition. Let's take a look at what each of these three should look like by examining what they are like by default.

<code> options: {

This is a set of default options and it is completely up to you what you will include in it. Take a look at demo transitions and how their options are used for animation; for instance, you can include the size of your grid as an option. Whatever you choose to include in your options, it will be used only by your transition, not by the main engine.

<code> setDefaults: function(content, width, height) {
    return {
        w: width,
        h: height

This function is passed the content which should be shown (a jQuery object) and its width and height (in pixels). The function should return an object defining default properties of a single slice (part of the content being animated). These properties can be overwritten for individual slices, but this comes in handy if you have a grid, for instance, and all your slices have the same width and height, or animation.

<code> apply: function(content, width, height) {
    return [
            x: 0,
            y: 0,
            animations: []

Given the same arguments as the setDefaults function, this should return an array of objects, where each object represents the initial state of a single slice of the content to be animated. A full slice object contains the following properties:

Name Description
x initial position of the slice's left edge relative to the left edge of the content, in pixels
y initial position of the slice's top edge relative to the top edge of the content, in pixels
w initial width of the slice, in pixels
h initial height of the slice, in pixels
animations an array of objects, where each object describes a CSS transition to be executed on the slice, described in the table below

Structure of each member of animations array from the previous table:

Name Description
property CSS property (for instance, 'opacity')
value initial value of the property (for instance, 0.1)
duration duration of transition, in milliseconds
delay delay of transition, in milliseconds

Have a look at demo transitions to see how the slices array is generated. This is where the logic of the transition happens and the engine will animate your transition based on the provided slices array.

That's it! You've got your custom transition all set and ready.