Animation with HTML and JS

We used to do a lot of animation in house with Flash and Action Script 3. There were some great tools and libraries out there to help with the position of items and opacity and all that not-as-fun-stuff.

One of my favorite libraries for AS3 was TweenLite from GreenSock. It made moving objects around super easy, and it was super fasts too. Luckily, they reciently released their awesome libraries for JavaScript, so I took to the text editor and made a quick fourth of July animation. Check it out below, and the code is after the break…

First, HTML and CSS:

<!DOCTYPE html>
<html>
<head>
    <title>HTML/JS Fireworks</title>
    <script src="js/TweenMax.min.js" type='text/javascript'></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    <script src='functions.js' type='text/javascript'></script>
    <link rel='stylesheet' href='style.css' type='text/css' />
</head>
 
<body>
 
<div id='fireworks'>
	<div id='spark'><img src='images/spark.png' alt='spark' /></div>
	<div id='burst'><img src='images/burst.png' alt='burst' /></div>
</div>
 
</body>
</html>

html {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
 
#fireworks {
	width: 100%;
	height: 100%;
	background: #000;
	overflow: hidden;
	position: relative;
	background: url("images/stars.jpg") repeat center center fixed;
}
 
#spark {
	width: 1%;
	position: absolute;
	top: 100%;
	left: 50%;
}
 
#spark img, #burst img { width: 100%; }
 
#burst {
	width: 1%;
	position: absolute;
	opacity: 0;
	left: 50%;
	top: 30%;
}

Cool. From this you can see that I have 2 images, one for the spark item that is going to shoot up into the air, and the second for the color burst that will explode in the sky. I also have a background image for the stars in the sky, but that one just sits there, so it’s not as important.

Line 5 of the HTML I’m including a reference to the TweenMax library. This thing has all the magic in it. Now for the nine lines of code that make the whole thing work:

$(document).ready( function() {
	var t1 = new TimelineMax({repeat: -1, repeatDelay: .5});
	t1.to($("#spark"), 1, {css:{top: "25%", opacity: 0}});
	t1.to($("#burst"), .2, {css: {opacity: 1, scale: 30}, })
	t1.to($("#burst"), 2, {css: {
		opacity: 0,
		top: "40%"
	}, ease: Power1.easeIn});
});

Pretty stinking simple! Let’s break it down.

First, run all the code when the page is ready via the standard jQuery $(document).ready() goodness. Line 2 creates a new TimelineMax object and sets it to repeat forever, with a half second delay between the the repeating. Next we append some “tweens” to the timeline, each adjusting different properties.

This should be fairly self explanitory, but I wanted to point out the property “scale”. It’s in the CSS object, but that’s not really a css property. TweenMax makes this available through a plugin, so that we can scale these objects easily, and they scale from the center of the object. Pretty cool, eh?

Feel free to ask me some questions, or try and expand this to make it more fancy. Ideas: figure out a way to have them shoot diagonal across the screen? Use a random location for the firework to explode? New colors for the burst? Etc?

Here’s a link to the code: fireworksJS.zip

Latest Images

Trending Articles

Latest Images