1. Basic Setup
    1. Add Files
    2. Initiate Sequence
    3. Add an HTML Slider
    4. Add some Content
    5. Setup a No-JS Fallback
  2. Creating an Animated Theme
    1. Setting up a Container and Frames
    2. How Sequence's Animations Work
    3. Animating Backwards
    4. Animating Using CSS3 Transitions
    5. Animation Examples
  3. Developer's Options
    1. Options
      1. List of Options
      2. Fallback Theme Options
    2. Callbacks
      1. List of Callbacks
      2. Using Callbacks
    3. Public Methods
      1. Public Functions
      2. Public Variables
  4. Tips and Tricks
    1. Vendor Prefixing

Documentation

Basic Set Up

Add Files

Place a link to jQuery and the sequence.js file in the <head> of your document:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="scripts/sequence.js"></script>

Initiate Sequence

Once you’ve added the necessary files for Sequence, within the <head> of your document, inititate an instance of Sequence like so:

<script type="text/javascript"> 
		    $(document).ready(function(){
		        var sequence = $("#sequence").sequence(options).data("sequence");
		    }
		</script>

Let’s break this down:

Firstly, we are saving an instance of Sequence into a variable (“var”) called sequence. The variable name is entirely up to you and, if necessary, will allow us to interact with Sequence via custom JavaScript which is explained in the Developer Option’s.

After the variable name, we specify a jQuery selector $("#sequence"), which is the element we want to act as the Sequence container. We will create a div in the HTML shortly with an ID of “sequence”.

The Sequence function (.sequence(options)), will accept many options that allow for modifying how Sequence works. These options are explained in the Developer Option’s section. If options are not specified, Sequence will rely on its default settings.

It is possible to place multiple instances of Sequence on the same page, like so:

<script type="text/javascript"> 
		    $(document).ready(function(){
		        var sequence = $("#sequence").sequence(options).data("sequence");
		        var sequence2 = $("#sequence2").sequence(options2).data("sequence2");
		    }
		</script>

Add an HTML Slider

Add Sequence’s simple HTML structure like so:

<div id="sequence">
		    <ul>
		        <li>
		            <!--Frame 1 content here-->
		        </li>
		        <li>
		            <!--Frame 2 content here-->
		        </li>
		        <li>
		            <!--Frame 3 content here-->
		        </li>
		    </ul>
		</div>

Sequence consists of a container (a div with a unique ID) and an unordered list. Sequence refers to each list item within that unordered list as a “frame”. Frames hold the content of your Sequence slider.

Add Content

To add content to a frame, simply put HTML within each list item:

<div id="sequence">
		    <ul>
		        <li>
		            <div class="info1">
		                <p>Frame 1</p>
		            </div>
		        </li>
		        <li>
		            <div class="info2">
		                <p>Frame 2</p>
		            </div>
		        </li>
		        <li>
		            <div class="info3">
		                <p>Frame 3</p>
		            </div>
		        </li>
		    </ul>
		</div>

Here we’ve added a div to each frame with unique classes. We will shortly write some CSS that will allow each div to animate in and out of the Sequence container.

Note that each frame can contain as many elements as necessary but only first level elements will be animated by Sequence.

Setup a No-JavaScript Fallback

In a small percentage of browsers, JavaScript may be disabled which is the technology Sequence is built upon. To prevent an empty container from showing, nominate a frame to be displayed by giving each of its content elements a class of “animate-in”:

<div id="sequence">
		    <ul>
		        <li>
		            <div class="info1 animate-in">
		                <p>Frame 1 information</p>
		            </div>
		            <img class="my-image animate-in" src="my-image.jpg" alt="An image of me" />
		        </li>
		        <li>
		            <div class="info2">
		                <p>Frame 2 information</p>
		            </div>
		        </li>
		        <li>
		            <div class="info3">
		                <p>Frame 3 information</p>
		            </div>
		        </li>
		    </ul>
		</div>

Here we’ve nominated the first frame to be displayed if JavaScript is disabled. I’ve added an image to the first frame to demonstrate that each content element within the nominated frame should be given the “animate-in” class.

Creating an Animated Theme using CSS3

Setting up the Sequence Container and Frames

Let’s start by styling our Sequence container:

#sequence{
		    border: black solid 3px;
		    height: 370px;
		    margin: 40px auto;
		    position: relative;
		    width: 450px;
		}

Here we’ve given the container some basic dimensional properties and a border. We’ve also given the container a relative position. This is an important property as all of the content elements with a Sequence slider will be given an absolute position, like so:

#sequence li > *{
		    position: absolute;
		}

This way, when we come to position elements with the Sequence container, a position top of 0 pixels will be the top of the Sequence container, and a position left of 0 pixels will be the left hand side of the Sequence container.

How Sequence’s Animations Work

Each first level element within a frame will be animated by Sequence, but how that animation happens is entirely your choice and created using CSS3 transitions. By default, Sequence initially displays the first frame’s content, so let’s start by animating the first element from our example above.

In the HTML, we’ve given the div a class of “info1” and made sure it will be displayed in the absence of JavaScript by also giving it a class of “animate-in”.

Should JavaScript be enabled (in almost all cases it will be), Sequence will begin by removing the “animate-in” class. So the HTML will look like this:

<div class="info1">
		    <p>Frame 1</p>
		</div>

This element is in its “start” position. Sequence will automatically add a class of “animate-in” to it, which will trigger the CSS3 transitions we will shortly write. The HTML will look like this:

<div class="info1 animate-in">
		    <p>Frame 1</p>
		</div>

When the “animate-in” position is reached, Sequence will then remove the “animate-in” class, and add a class of “animate-out”, which again, we can control via CSS3 transitions. The HTML will look like this:

<div class="info1 animate-out">
		    <p>Frame 1</p>
		</div>

When the “animate-out” position is reached, Sequence will then start automatically applying these transitional phases to the next frames elements. Once the last frame’s elements have reached the “animate-out” position, Sequence will go back to the first frame, remove the “animate-out” class (reseting the element to it’s starting position), and the whole process will continue indefinetly.

  • .info1

    .animate-in

  • .info2

  • .info3

An instance of Sequence demonstrating how/when the transitional classes are applied (use arrow keys to navigate)

Animating Backwards

Sequence contains options that allow for a user to control the animation of frames using next/previous buttons, the keyboard left/right arrow keys or swiping on touch devices (version 1.0 onwards). You can also make Sequence play in reverse via the developer options. Sequence will apply the above mentioned transitional phase classes in reverse.

Let’s assume frame 2 has one element that is currently in the “animate-in” position. If a user were to click a “previous” button, Sequence would remove the “animate-in” class, resetting the element to its starting position and the previous frame’s element (frame 1), would be given the class of “animate-out” (reseting it to the “animate-out” position), followed by a class of “animate-in” to then make it transition into its “animate-in” position.

Animating Frame Elements using CSS3 Transitions

Now we know how Sequence works, we can manipulate the transition of frame elements using CSS3 transitions. Just before we begin adding transitional properties, let’s style the div within each frame:

.info1, .info2, .info3{
		    background: #3f7ad6;
		    color: white;
		    height: 95px;
		    padding: 5px;
		    width: 95px;
		}

We’ve made each div 95px wide and tall and given them a background colour. Now, let’s begin applying transitional properties:

.info1{
		    left: -150px;
		    top: 10px;
		    -webkit-transition-duration: 1s;
		    -moz-transition-duration: 1s;
		    -o-transition-duration: 1s;
		    -ms-transition-duration: 1s;
		    transition-duration: 1s;
		}

Remember that an element with no transitional phase class is in its “start” position. We’ve started this element 150px outside of the Sequence container (to the left), and 10px from the top.

Note #1: we’ve given the element a transition duration but, this is NOT the duration it will take to go from the “start” position to the “animate-in” position. Instead, it is the duration it will take to go from the “animate-in” position to the “start” position when Sequence is animating backwards.

Note #2: Sequence has been built to work across all modern browsers which means it is necessary to use vendor prefixes for CSS3 attributes such as transition-duration. Please see the Vendor Prefixing Tips section for advice on how to make using vendor prefixes as easy as possible.

As we saw in How Sequence’s Animations Work, Sequence will add a class of “animate-in” to any active frame elements to make it transition to its “animate-in” position. So, let’s style the transition between the “start” and “animate-in” positions:

.info1.animate-in{
		    left: 165px;
		    -webkit-transition-duration: 1s;
		    -moz-transition-duration: 1s;
		    -o-transition-duration: 1s;
		    -ms-transition-duration: 1s;
		    transition-duration: 1s;
		}

We’ve made it so that the div with class “info1”, will move from its “start” position of left: -150px, to left: 165px. We haven’t specified a top position so that will remain the same as the “start” position (top: 10px). By adding a transition-duration, the time it will take to go between the “start” and “animate-in” positions will be 1 second (1s). Again, we’ve used vendor prefixes to make the theme work across all modern browsers.

.info1.animate-out{
		    left: 500px;
		    -webkit-transition-duration: 1s;
		    -moz-transition-duration: 1s;
		    -o-transition-duration: 1s;
		    -ms-transition-duration: 1s;
		    transition-duration: 1s;
		}

Once all of the frame’s elements have finished animating in, Sequence will then change the “animate-in” class to “animate-out”. As we did with the “animate-in” transition, we’ve changed the left value to make the element move outside of the Sequence container and specified a 1 second transition duration.

From here on, we can apply transition durations to the remaining elements within the second and third frame. For the purpose of this demo and the sake of simplicity, we can modify the CSS we’ve just written to apply the same transition durations to the other frame elements, like so:

.info1, .info2, .info3{
		    left: -150px;
		    top: 10px;
		    -webkit-transition-duration: 1s;
		    -moz-transition-duration: 1s;
		    -o-transition-duration: 1s;
		    -ms-transition-duration: 1s;
		    transition-duration: 1s;
		}

Here we’ve given start positions to the div elements within the second and third frames.

.info2{
		    top: 130px;
		}
		
		.info3{
		    top: 250px;
		}

This CSS overwrites the top positions for each element so one is positioned below the next.

.info1.animate-in, .info2.animate-in, .info3.animate-in{
		    left: 165px;
		    -webkit-transition-duration: 1s;
		    -moz-transition-duration: 1s;
		    -o-transition-duration: 1s;
		    -ms-transition-duration: 1s;
		    transition-duration: 1s;
		}
		
		.info1.animate-out, .info2.animate-out, .info3.animate-out{
		    left: 500px;
		    -webkit-transition-duration: 1s;
		    -moz-transition-duration: 1s;
		    -o-transition-duration: 1s;
		    -ms-transition-duration: 1s;
		    transition-duration: 1s;
		}

And finally we’ve included the second and third div elements in our “animate-in” and “animate-out” transitional positions.

What we’ve learnt in this demonstration are the basics to creating an animated theme for Sequence. You should now be able to create your own theme. Keep reading though, Sequence boasts even more useful features to help you make a truly amazing and unique theme.

Transitional CSS Examples

When specifying properties for transitional classes, in most cases you will use a transition-duration (unless you just want frame elements to immediately snap to the next/previous phase) but the remaining properties to transition between are entirely up to you. In this demo, we’ve only transitioned between numerous left properties, making an element move in and out of a Sequence container. Here’s just a few more examples you may like to experiment with:

Coming soon

Developer’s Options

Options

Sequence comes with many options that allow you to easily control its features.

Specifying Options

As explained in Initiate a Sequence Slider, each instance of a Sequence slider can be passed developer defined options that override Sequence’s default settings. Options are stored in an object passed to the .sequence() function, like so:

<script type="text/javascript"> 
		    $(document).ready(function(){
		        var options = {
		            autoPlay: true,
		            autoPlayDelay: 3000
		        }
		        var sequence = $("#sequence").sequence(options).data("sequence");
		    }
		</script>

Multiple instances of Sequence can be passed the same options:

<script type="text/javascript"> 
		    $(document).ready(function(){
		        var options = {
		            autoPlay: true,
		            autoPlayDelay: 3000
		        }
		        var sequence = $("#sequence").sequence(options).data("sequence");
		        var sequence2 = $("#sequence2").sequence(options).data("sequence2");
		    }
		</script>

Or differing options:

<script type="text/javascript"> 
		    $(document).ready(function(){
		        var options = {
		            autoPlay: true,
		            autoPlayDelay: 3000
		        }
		
		        var options2 = {
		            autoPlay: true,
		            autoPlayDelay: 5000
		        }
		        var sequence = $("#sequence").sequence(options);
		        var sequence2 = $("#sequence2").sequence(options2);
		    }
		</script>

List of Options

The following is the complete set of options implemented within Sequence:

Option Name Value Default Description
nextButton true/false or a CSS selector false A CSS selector that, when clicked, causes the current frame to animate out and the next to animate in.

true: use the default CSS selector (".next")
false: don't use a button
prependNextButton true/false or a CSS selector false If nextButton is true, specify which element to prepend the nextButton to.

true: automatically prepend to the Sequence container
false: don't automatically prepend (when you want to manually add the button via HTML)
CSS Selector: Specify a CSS Selector to automatically prepend the nextButton to
nextButtonSrc A path to an image "images/bt-next.png" If prependNextButton is true or a CSS selector, specify a path to the next button image
nextButtonAlt A string 
"&#gt;"
 If prependNextButton is true or a CSS selector, specify alt text for the next button image
showNextButtonOnInit true/false true By default, the next button will be shown when Sequence is initiated. Set this to false should you wish for it to be hidden on initiation (you may like to do this to fade the button in using CSS for example)
prevButton true/false or a CSS selector false A CSS selector that, when clicked, causes the current frame to animate out and the previous to animate in.

true: use the default CSS selector (".prev")
false: don't use a button
prependPrevButton true/false or a CSS selector false If prevButton is true, specify which element to prepend the prevButton to.

true: automatically prepend to the Sequence container
false: don't automatically prepend (when you want to manually add the button via HTML)
CSS Selector: Specify a CSS Selector to automatically prepend the prevButton to
prevButtonSrc A path to an image "images/bt-prev.png" If prependPrevButton is true or a CSS selector, specify a path to the previous button image
prevButtonAlt A string 
"&#lt;"
 If prependPrevButton is true or a CSS selector, specify alt text for the previous button image
showPrevButtonOnInit true/false true By default, the previous button will be shown when Sequence is initiated. Set this to false should you wish for it to be hidden on initiation (you may like to do this to fade the button in using CSS for example)
startingFrameID A number 1 The frame that should first be displayed when Sequence loads.
autoPlay true/false true true: Sequence will automatically animate from frame to frame with a delay between each frame (specified using the autoPlayDelay setting)
false: Sequence will display the starting frame until a user chooses to navigate Sequence using next/previous buttons/swiping etc.
autoPlayDelay A number in milliseconds 5000 If using autoPlay, the speed at which frames should remain on screen before animating to the next.
autoPlayDirection 1/-1 1 If using autoPlay, the direction in which Sequence should play.

1: Forward
-1: Reverse
cycle true/false true Whether or not Sequence should go to the first frame when a user navigates forward from the last frame. Likewise, whether Sequence should go to the last frame when a user navigates in reverse from the first frame.
pauseOnHover true/false true If using autoPlay, whether frames should stop auto playing when the user hovers over Sequence. autoPlay will continue again when the user moves their cursor outside of Sequence.
pauseOnElementsOutsideContainer true/false false Whether or not Sequence should pause when the user hovers over one of its child elements outside of the Sequence container
pauseIcon true/false or a CSS selector false If using autoPlay, display a pause icon when the user hovers over Sequence.

true: use the default pause icon CSS selector (".pause-icon")
false: don't display a pause icon
A CSS Selector: Specify a CSS selector to an HTML element you have manually added to the document
prependPauseIcon true/false or a CSS selector true If pauseIcon is true, specify which element to prepend the pauseIcon to.

true: automatically prepend to the Sequence container
false: don't automatically prepend (when you want to manually add the pause icon via HTML)
CSS Selector: Specify a CSS Selector to automatically prepend the pauseIcon to
pauseIconSrc A path to an image "images/pause-icon.png" If prependPauseIcon is true or a CSS selector, specify a path to the pause icon image
animateStartingFrameIn true/false false true: The starting frame will begin in its "start" position and move to its "animate-in" position when Sequence loads
false: The starting frame will begin in its "animate-in" position when Sequence loads
delayDuringOutInTransitions true/false or a number in milliseconds 1000 Whether or not there should be a delay between a frame animating out and the next animating in.

true: the next frame will not animate in until the current frame has completely animated out
false: the next frame will animate in at the same time as the current frame animating out
A number: The amount of milliseconds to wait after animating the current frame out, before the next frame is animated in
preloader true/false or a CSS Selector true true: Use the default preloader and styles
false: don't use a preloader
CSS Selector: Specify a CSS Selector to use as the preloader

If true, the following default preloading styles will be applied to the document: 
#sequence-preloader{
			height: 100%;
			position: absolute;
			width: 100%;
			z-index: 999999;
		}
		
		@-*-keyframes preload {
			0%{
				opacity: 0;
			}
			
			50%{
				opacity: 1;
			}
			
			100%{
				opacity: 0;
			}
		}
		
		#sequence-preloader img{
			background: #ff9933;
			border-radius: 6px;
			display: inline-block;
			height: 12px;
			opacity: 0;
			position: relative;
			top: -50%;
			width: 12px;
			-*-animation: preload 1s infinite;
		}
		
		.preloading{
			height: 12px;
			margin: 0 auto;
			top: 50%;
			position: relative;
			width: 48px;
		}
		
		#sequence-preloader img:nth-child(2){
			-*-animation-delay: .15s;
		}
		
		#sequence-preloader img:nth-child(3){
			-*-animation-delay: .3s;
		}
		
		.preloading-complete{
			opacity: 0;
			visibility: hidden;
			-*-transition-duration: 1s;
		}
prependPreloader true/false or a CSS Selector true If preloader is true, specify which element to prepend the preloader to.

true: automatically prepend to the Sequence container
false: don't automatically prepend (when you want to manually add the preloader via HTML)
CSS Selector: Specify a CSS Selector to automatically prepend the preloader to
hidePreloaderUsingCSS true/false true If true, Sequence will add a CSS class of "preloading-complete" to the preloader, allowing you to hide that preloader using a CSS3 transition. Example: 
.preloading-complete{
			display: none;
			opacity: 0;
			visibility: hidden;
			-webkit-transition-duration: 1s;
			-moz-transition-duration: 1s;
			-opera-transition-duration: 1s;
			-ms-transition-duration: 1s;
			transition-duration: 1s;
		}
The above CSS will cause the preloader element to fade out over a 1 second duration and then become "hidden".
hidePreloaderDelay A number in milliseconds 0 If hidePreloaderUsingCSS is true, the number of milliseconds to wait after the preloader has been hidden before initiating the first animation.
keysNavigate true/false true Whether to allow the user to navigate between frames using the left and right arrow keys
reverseAnimationsWhenNavigatingBackwards true/false true Whether animations should be reversed when a user navigates backwards by clicking a previous button/swiping/pressing the left key

true: when navigating backwards, Sequence will animate the preceding frame from its "animate-out" position to its "animate-in" position (creating a reversed animation)
false: when navigating backwards, Sequence will animate the preceding frame from its "start" position to its "animate-in" position (as it does when navigating forwards)
touchEnabled true/false true Whether to allow the user to navigate between frames by swiping left and right on touch enabled devices Coming in version 1.0
swipeThreshold A number 15 The percentage size of the Sequence container the user's finger must move before a swipe event is triggered Coming in version 1.0
fallbackTheme A JavaScript object containing more options See Fallback Theme Options Settings for the fallback theme when a browser does not support CSS3 transitions. Please see Fallback Theme Options for more information

Fallback Theme Options

The fallback theme options control Sequence when it is being viewed in browsers that do not support CSS3 transitions. When in these browsers, Sequence will fallback to a theme that animates each frames opacity -- fading in and out of frames.

More fallback themes and options will be made available with future releases of Sequence.

Complete List of Fallback Theme Options

Option Name Value Default Description
speed A number in milliseconds 500 The speed at which frames should transition when in a browser that does not support CSS3 transitions

Specifying Fallback Theme Options

Fallback theme options are included in the options of each instance of Sequence, like so:

<script type="text/javascript"> 
		    $(document).ready(function(){
		        var options = {
		            fallbackTheme: {
		            	speed: 500
		            }
		        }
		        var sequence = $("#sequence").sequence(options).data("sequence");
		    }
		</script>

Callbacks

Callbacks allow you to execute custom JavaScript functions during specific periods of Sequence's transitions.

Compete List of Callbacks

The following is the complete set of callbacks implemented within Sequence:

Callback Description
beforeCurrentFrameAnimatesIn Executes before the current frame begins to animate in
beforeCurrentFrameAnimatesOut Executes before the current frame begins to animate out
beforeNextFrameAnimatesIn Executes before the next frame begins to animate in
afterNextFrameAnimatesIn Executes after the next frame has animated in (and becomes the current frame)
afterPreload Executes after Sequence has preloaded

Using Callbacks to Execute Custom Functions

Callbacks are included in the options of each instance of Sequence, like so:

<script type="text/javascript"> 
		    $(document).ready(function(){
		        var options = {
		            autoPlay: true,
		            autoPlayDelay: 3000,
		            beforeCurrentFrameAnimatesIn: function(){
		            	alert("Do something before the CURRENT frame animates in"); //you can add the code to execute here...
		            },
		            beforeNextFrameAnimatesIn: function(){
		            	myCustomFunction(); //...or specify a function
		            }
		        }
		        var sequence = $("#sequence").sequence(options).data("sequence");
		    }
		    
		    function myCustomFunction(){
		    	alert("Do something before the NEXT frame animates in");
		    }
		</script>

Public Methods

Public methods are the functions and options that Sequence utilises, made available for developers to extend and enhance their particular implementation of it.

Public Functions

Function Name Description Arguments Example
goTo(id, direction) Causes Sequence to animate to a specific frame id (required): a number corresponding to a frame (the first frame has an id of 1).

direction (optional): Whether the frame being animated to should be considered as being ahead or behind the current frame.

Specifying a direction value of 1 will change the current frame from the "animate-in" position, to "animate-out", and the next frame will be changed from "start" to "animate-in".

Specifying a value of -1 will change the current frame from "animate-in" to the "start" position and the next frame will be changed from "animate-out" to "animate-in".

If a "direction" is not specified, Sequence will consider a frame with a higher id than the current frame as being ahead of it (1), and frames with a lower id will be considered as being behind (-1). 		sequence.goTo(3, 1)
next() Causes Sequence to animate to the next frame None sequence.next()
prev() Causes Sequence to animate to the previous frame None sequence.prev()
startAutoPlay(wait, newAutoPlayDelay) Start Sequences auto play feature if not already active wait(optional): A number in milliseconds to wait before autoPlay feature is started. If undefined, the value will be 0

newAutoPlayDelay (optional): The delay between frames automatically animating in/out. If undefined, the existing autoPlayDelay value will be used 		sequence.startAutoPlay(1000, 3000)
stopAutoPlay() Stop Sequence from auto playing None sequence.stopAutoPlay()
preloaderFallback() The default preloader consists of three images that are faded in and out using CSS3 transitions. Calling preloaderFallback() replicates the default preloader using jQuery and should be called after a Sequence slider is initiated. None 
var sequence = $("#sequence").sequence(options).data("sequence");
		if(!sequence.transitionsSupported){
			sequence.preloaderFallback();
		}

Public Variables

Variable Description
sequence.container Returns the selector for Sequence's container element
sequence.currentFrame Returns the selector for the current frame
sequence.direction Returns the direction Sequence is currently animating in (1 = forward/-1 = reverse)
sequence.currentFrameChildren Returns an array containing the selectors for the current frame's child elements
sequence.currentFrameID Returns a number representing the current frames position in relation to all frames. 1 is the first frame
sequence.nextFrameID Returns a number representing the nextframes position in relation to all frames. 1 is the first frame
sequence.hasTouch Returns true or false depending on whether the device has touch capabilities
sequence.numberOfFrames Returns how many frames are in the Sequence container
sequence.prefix Returns the vendor prefix for the browser the user is viewing Sequence in
sequence.settings Returns an object containing Sequence's settings
sequence.transitionsSupported Returns true or false depending on whether the browser supports CSS3 transitions

Tips and Tricks

Vendor Prefixing

Coming soon