Sebelum masuk pada pembuatan animasi easing menggunakan plugin jquery UI Easing saya akan menjelaskan sedikit  fungsi Easing, fungsi easing Mempermudah menentukan kecepatan di mana animasi berlangsung pada titik-titik yang berbeda dalam animasi. JQuery  dengan dua easing linear, yang berlangsung pada kecepatan konstan di seluruh animasi, dan ayunan (default pelonggaran jQuery inti), yang berlangsung sedikit lebih lambat di awal dan akhir animasi daripada yang dilakukannya di tengah animasi. jQuery UI menyediakan beberapa fungsi pelonggaran tambahan, mulai dari variasi pada perilaku ayunan efek disesuaikan seperti memantul.
Beberapa easing akan menghasilkan nilai negatif selama animasi. Tergantung pada sifat yang sedang animasi, nilai aktual dapat dijepit pada nol. Misalnya, Anda dapat menghidupkan kiri ke nilai negatif, tetapi Anda tidak dapat menghidupkan tinggi atau opacity ke nilai negatif.  Cara terbaik untuk memahami bagaimana sebuah pengurangan akan mempengaruhi animasi adalah untuk melihat persamaan grafiknya dari waktu ke waktu. Lihat di bawah untuk grafik semua animasi yang tersedia di jQuery UI.

Oke sekarang kita akan masuk pada pembuatan  Plugin Jquery UI Easing, silahkan ikuti langkah – langhkah  berikut ini;

Pertama buat script HTML di bawah ini,

Oke kita lanjut lagi membuat script CSS , buat script CSS berikut ini pada tag <head> dan </head>

Oke kalau sudah buat script fungsi, buat menjalankan aniamasinya pada tag <head> dan </head>

Dari Script di atas kita dapat menghasilkan tiga buah animasi easing yaitu linear, swing dan default easing,  script di atas  ketika dijalankan maka akan menghasilkan gambar seperti di bawah ini;

Cara Membuat Animasi Easing Menggunakan Plugin Jquery UI Easing

 

untuk lebih jelasnya silahkan klik demo!  , Oke semoga bermanfaat.