jQuery Animation

Learn how to use jQuery to animate your web pages and Javascript apps.
Course info
Rating
(140)
Level
Intermediate
Updated
Oct 8, 2013
Duration
3h 41m
Table of contents
jQuery Animation
Simple jQuery Animation
Easing
Advanced jQuery Animation
Creating an Animated Button
Creating an Animated Picture Gallery
Creating an Animated Pie Chart
Building and Optimizing A Simple Sprite Engine
Description
Course info
Rating
(140)
Level
Intermediate
Updated
Oct 8, 2013
Duration
3h 41m
Description

Learn how to use jQuery to animate your web pages and Javascript apps. This course covers basic, single method calls for animation as well as advanced animation patterns and techniques. Learn to animate your DOM elements in 2D and 3D, use animation queues, promises, and much more. Four real world projects are built, including a fully animated Buy Now button, an animated photo gallery, an animated pie chart control, and a basic video game framework.

About the author
About the author

Mark started in the developer world over 25 years ago. He began his career with a Bachelor of Science in Computer Science from St. Johns University. After spending 10 years on Wall Street working for Goldman Sachs, Lehman Brothers and other major investment banks, Mark became interested in animation and video game software.

More from the author
Angular Forms
Beginner
2h 3m
Apr 2, 2019
JavaScript Fundamentals
Intermediate
3h 0m
Jul 26, 2018
JavaScript: Getting Started
Beginner
2h 46m
Jan 19, 2018
More courses by Mark Zamoyta
Section Introduction Transcripts
Section Introduction Transcripts

Simple jQuery Animation
Welcome to this module titled Simple jQuery Animation. jQuery makes animating DOM elements very easy. When we're surfing the internet, we always see content fading in and out, sliding up and down, and slowly animating into position. These simple animations are usually accomplished with just one line of code in jQuery, and in some cases you don't even need a new line of code. You can just use chaining on a jQuery object to append a simple animation method. In this module, we'll look at the simple yet powerful animation methods built into jQuery. We'll use a single method call to show, hide, and toggle DOM elements. We'll see how to fade our DOM elements in and out and slide elements up and down. Then we'll look at jQuery's animate method, which lets us perform more complex animations. We'll see how to animate the values of any numeric CSS property with this method. Animations can be chained together so that they're run sequentially. We'll take a look at creating more complex animations with chaining, and we'll look at how to stop a long- running animation gracefully.

Easing
This module is all about easing and easing functions. When we animate a DOM element in jQuery, what we're doing is changing some value over time. Is that change constant over the given time or does it speed up or slow down at any point? Well, easing is what determines how the value changes over time. Easing into an animation determines whether we accelerate quickly or slowly at the start. Easing out of an animation determines whether we accelerate quickly or slowly at the end of the animation. Some cool effects can be created with easing functions such as having your DOM elements bounce or even have an elastic look and feel. The overall purpose of using easing functions is to give our animated DOM elements some more natural or a more whimsical feel. We want to break up the monotony of linear motion, which makes our animations look robotic and mechanical. We want our animations to be enjoyable to watch and move like natural objects. In this module, we'll take a detailed look at easing our animated DOM elements. jQuery only supports two different easing functions, so we'll look at how we can use jQuery UI to get access to many more easings. You may already be using jQuery UI for your project in which case you're set to go. If jQuery UI is too big a package to include in your project, we'll look at a jQuery plugin, which is specifically designed to give you more easing functions and nothing else. Finally, we'll look at how you can modify existing easing functions or create your own easing functions in jQuery.

Advanced jQuery Animation
This module is titled Advanced jQuery Animation. We'll be looking at a wide range of jQuery animation methods, options, and techniques. Probably the most valuable part of this module is learning how to animate non-numeric CSS properties. This allows us to take advantage of 2D and 3D rotations and other operations such as animating colors. We'll first look at transforming DOM elements in two dimensions. We'll be mostly interested in the CSS transform property. This property will let us translate, scale, and rotate any DOM element. Next, we'll look at 3D rotations on DOM elements. This also uses the CSS transform property. Internet Explorer 10 is the first IE release to support the CSS properties which make 3D animation possible. So, now all the modern popular browsers are capable of animation with 3D rotations. We'll look at animating colors with the jQuery color plugin. We'll take a look at working with animation queues. An animation queue holds animation commands, which will be executed one after the other. We've already seen this when we chained animation calls to create a complex animation. We can actually create several animation queues and have them simultaneously influence a DOM object. This would be useful in a case where we want to apply some kind of fade out or resizing of an animation, which is already running. Finally, we'll look at promises as they relate to animation. A promise is an object, which will let us know when an animation has completed or if an animation was prevented from completing.

Creating an Animated Button
This module is titled Creating an Animated Button. So far in this course we've looked at dozens of jQuery methods and animation options. We've seen them in sample code, but now it's time to start focusing on practical applications. This is the first of four modules where we'll be building animation projects and wrapping them up as reusable JavaScript modules for use in other projects. This module is dedicated to building the animated button you see here. It's a Buy Now button, and we'll be adding several animations to the text, shopping cart icon, and the entire button itself. I got the shopping cart icon from Font Awesome, and we'll look at importing that package for icons. You'll notice a radial gradient, which animates across the red background. This is used to draw attention to the button. When we enter the button with our mouse cursor, the button grows larger, and the icon and text grow even more. When the mouse leaves the button, everything bounces back into its original position. You'll notice we're using an elastic easing to give it that bouncing look. When we click on the button, a few animations take place. The text fades out, the button rotates 20 degrees, and the shopping cart rolls down the button and bounces against the right side while the entire button fades out. So, the shopping cart slamming into the side of your button may not be something you really want on your website, but this is a course in jQuery animation, and I'm a video game programmer, so anything with wheels is fair game for a collision. This button is created in modular, reusable code, so it's a great starting point for animated buttons or other animated components in your own website.

Creating an Animated Picture Gallery
Welcome to the module Creating an Animated Picture Gallery. In this module, we're going to use jQuery to create the picture gallery you see here. These pictures are illustrations of the 12 zodiac signs, but you can use any image files for this project. In this module, we'll put together this gallery piece by piece making heavy use of jQuery's animation features. The JavaScript file for this gallery ended up being only 180 lines of code, so it really shows off the power of jQuery for use in animation projects. We'll go over loading and displaying images. We'll use jQuery's hover method to attach animations to the mouseenter and mouseleave events. You'll notice when I mouse over an image all the other images slowly move away from it. Then when I mouse out, all the images move back into place. When I click an image, the image zooms in while all the other images rotate in 3D and fade out. When I click the image again, all the images animate back to their original positions. We'll use Internet Explorer, Firefox, and Chrome to test out our gallery. 3D transformations still have some quirky behavior in modern browsers, and Internet Explorer hasn't even allowed for standard 3D transformations until IE 10, its most recent version. We'll look into problems with the various browsers and either fix them up or find ways to work around them. This gallery is written as a reusable module, so you'll be able to easily make changes to it for use in your own projects. Now, let's get started.

Creating an Animated Pie Chart
Welcome to the module Creating an Animated Pie Chart. Up until now, we've been animating existing image files as DOM elements, but sometimes you'll need to animate images which you draw yourself in JavaScript. Here's the pie chart control that we're going to be creating in this module. Each slice of the pie chart is drawn using JavaScript in its own HTML 5 canvas element. We let the user select a slice with the mouse, and then we have the selected slice rotate to the top of the pie chart and separate from the rest of the control. This animation is a little bit more complex than the previous projects where we built an animated button and an animated picture gallery, so we're going to create a simple state machine to help us organize the various animation states our pie chart moves through. Determining which pie slice gets selected involves the use of angles measured in radians. So, we'll cover what radians are and how they're used in circles and rotations. We'll also integrate and animate DOM elements along with our pie chart to show the title and percentage of the selected pie slice. At the end of this module, you'll have a modular pie chart control that you can modify to suit the needs of your own projects.

Building and Optimizing A Simple Sprite Engine
Welcome to this module titled Building and Optimizing a Simple Sprite Engine. All of jQuery's animation methods work with some kind of duration or animation length. You need to know how long a DOM element will animate before you can kick it off. There are many cases where we're just not going to know the duration of an animation. We may need to animate objects dynamically based on user interaction or other factors. In this module, we'll be using jQuery to set up our DOM elements; however, we'll be using our own animation timer and loop to control our animated elements. A Spite is a visible object on the screen, and this term is usually used in video game programming. In a game, everything on the screen that moves could be considered a Sprite, but a Sprite can be used in more than just video games. If you wanted to create some cool special effects in an advertisement or you wanted to experiment with dynamic particles or other simulations, Sprites would be useful. We're going to create a simple Sprite engine that lets us easily create Sprites and set them in motion. Our Sprites will be displayed on a control that we'll call a GameSurface. Once we get our GameSurface operating, we'll take a look at optimizing our code. We'll use the profiler in the Chrome browser to take a look at our code in detail. We'll isolate the exact code which is slowing things down and fix it up to get better performance.