jQuery Timeline Animation

With the shaky future of Adobe’s Flash technology over the past few years, mainly due to its lack of usability on one of the most popular mobile platforms, more than a few companies are looking to port their rich media to JavaScript frameworks that can support the same level or interactivity.
In steps jQuery which is more than capable of handling timeline animation, you just have to visualize it without the typical timeline editors that you may have gotten used to in Flash.

Last year I was tasked with converting a full flash site to html for better SEO and compliance reasons. The initial roadblock was that they wanted the site to function exactly as it did in Flash. At this point I had used jQuery for animation so much that I had zero ideas on where to start, thank goodness for the incredible API they provide!

So enough yammering on, let’s jump into a quick sample!

HTML

1
2
3
4
5
<header role="banner">
    <div id="logolong"><img src="img/timeline-logo.png" /></div>
    <div id="element"><img src="img/timeline-element.png" /></div>
    <div id="bg"></div>
</header>

Great, now we have some markup on the page to work with, let’s get to styling.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
header {
    position: relative;
    width: 400px;
    height: 250px;
    overflow: hidden;
    background: #000; margin: 5px;
}
#bg {
    position: absolute;
    top: -50px;
    left: 0px;
    width: 780px; height: 500px; z-index: 1; background: transparent url(img/timeline-bg.jpg) no-repeat;
}
#element {
    position: absolute;
    top: -400px;
    left: 2000px;
    width: 178px; height: 90px; z-index: 2;
}
#logolong {
    position: absolute;
    top: 0px;
    left: -900px;
    width: 304px; height: 52px; z-index: 3;
}

Now we have elements styled for where we’d like them to begin their animation, we’ll get into some good ideas for getting these points after the jQuery below.

jQuery

1
2
3
4
5
6
7
8
9
//quickly setting up shortcuts, personal preference
var element, bg, logo = '';
element = $('#element');
bg = $('#bg');
logo = $('#logolong');
//indented to help visually track
bg.delay(0).animate({'top': 0}, 1500, function() {});
    element.delay(750).animate({left: 200, top: 70}, 1250, function() {});
        logo.delay(1800).animate({left: 10, top: 15}, 750, function() {});

Awesome, now we’ve taken our elements from the starting point straight through to the end! So what’s the best way to find our values, specifically starting points? Well, I generally do my CSS first laying out where I’d like the elements to end animation, then I flesh out the .delay() and .animate() stuff. Then I work my way backwards to the direction I want them to shoot in. A few options that I really didn’t cover above is the use of opacity or dimensions (width/height), you can do pretty much animate anything you have access to via css!

One more thing, you can create much smoother and easily controlled animations if you extend using jQuery UI for some extra easing functions. Have fun!

Check out the Fiddle!

6 thoughts on “jQuery Timeline Animation

  1. I’ve read some good stuff here. Certainly worth bookmarking for revisiting. I surprise how much effort you put to make such a wonderful informative site.

  2. Pingback: jfd98ayhcim

Comments are closed.