jQuery UI Easing

What is Easing

We all know that no object in real life works instantly. No object just starts and stops instantly, and almost never moves at a constant speed.

For example: If you drop a ball on the ground, it will first accelerate downward and then bounce back up after hitting the floor.

jQueryUI Easing

jQueryUI Easing function is used to specify the rate of change of a parameter with respect to time. There are different types of easing functions in jQuery like linear, swing etc. Some easing provides their result in negative value during the animation. Its depend on the properties that are being animated.

How to choose easing functions

  • CSS: CSS properties transition and animation facilitates users to pick easing functions. But they don?t support all easing functions and you have to specify the desired easing functions yourself. For example: Bezier curve
  • SCSS: Sass/SCSS can be used to describe animation also. Compass removes prefixes before the transition and animation properties, and the Compass Ceaser Plugin facilitates you pass the easing function by name.
  • Jquery Easing Plugin: jQuery with the jQuery Easing Plugins is the easiest way to describe animation with easing.

Example of jQueryUI Easing Functions

Here, we are going to define the different types of easing functions

Test it Now



Latest Courses