TechTalk #62: Animations in AngularJS

Hola!

TechTalk minggu ini masih membahas javascript dan kali ini topiknya adalah Animations in AngularJS. Masih bersama mas Rijalul Fikri, yeah. Jadwal sebelumnya minggu ini topiknya MeteorJS, berhubung pembicaranya berhalangan jadinya mas Fikri yang turun tangan (ceritanya begitu).

Kali ini dijelasin dari basic animasi di web. Bukan animasi yang kompleks, bukan bahas <canvas> juga. Pertama dikenalkan dengan transition di CSS. Lalu dibandingkan dengan jQuery animate(). Dan terakhir penerapan animasi di AngularJS.

What I learned:

• Gunakan properti yang ramah animasi: PROS (Position, Rotation, Opacity, Scale). Referensi
• Gunakan Animate.css untuk efek-efek animasi yang umum digunakan
• Animasi dengan CSS lebih menghemat waktu dibanding JS, terutama untuk kasus sederhana seperti efek hover
• Angular #1: menggunakan modul ngAnimate dan manual di CSS-nya
• Angular #2: modul Hendrixer/ngFX yang sudah bundled dengan ngAnimate dan Animate.css
• Angular #3: modul cgwyllie/ngular-velocity, yang satu ini belum dibahas karena katanya terlalu panjang untuk dijelasin :|

Sip, minggu depan kita ke MeteorJS. :)