Understanding animation easing


show more Understanding animation easing provides you with in-depth training on Web. Taught by Joe Chellman as part of the jQuery for Web Designers show less
please wait ...

Understanding animation easing

When you start playing with animation in jQuery or in CSS, pretty soon you're going to run into the term, easing, which we're going to talk about in this movie. So jumping down in my file to the JavaScript, I have this animation that moves my images around when I click a link. It takes two seconds to do this. So my animation method first takes the properties that I want to animate and then the duration. There's another argument that I can add for, what is called easing. In this context, easing is a mathematical function that determines how the animation progresses from beginning to end.

So that is, how fast it is at certain parts and how slow it is at other parts. The way we work with these is calling them by name, by a string. So if I want to set my easing on this animation, I just pass the string with the name that I one want. jQuery has two built in, the one it uses, if you don't specify any easing function, is called swing and with this one your animation starts, it kind of speeds up...

Understanding animation easing
Video duration: 4m 4s 1h 42m Intermediate

Viewers:

Understanding animation easing provides you with in-depth training on Web. Taught by Joe Chellman as part of the jQuery for Web Designers

Subject:
Web
Software:
jQuery
Author:
please wait ...