Introduction to ngFx for Angular animations

[00:00] In this lesson, we're going to be using ngFx to add some nice animations to our Angular application. Over here, we have this list of repeated items. We're using this search box here as a filter. We're going to use ngFx to attach animations to the elements entering and leaving the page.

[00:15] To get started, we can bower install ngFx. Note that its dependencies include ngAnimate and also GSAP TweenMax JS. Once we have those script tags, we can head over to our application, add the module dependencies of ngFx and also ngAnimate here.

[00:33] To actually start using the animations, in our case, since we're using ng-repeat, we head over to the element that's being repeated over...That's this "li" element here...and attach the ngFx class names.

[00:43] ngFx uses the fx namespace for its CSS classes. Say we want to add a zoom animation. We can say, "fx-zoom-left." As we come over here and filter, we can see we get this nice zoom animation for the elements entering and leaving the page.

[01:00] We can also control the speed of our animations by saying, "fx-speed-" and any time in milliseconds. Let's slow things down and put "1300," 1.3 seconds. As we filter, we notice the animations are just a little slower here, but still pretty smooth.

[01:18] We can also control the easing of our animations with ngFx. We can say, "fx-easing-." Let's use a dramatic one, elastic. All the easings are defined with GSAP TweenMax. Here, as we filter, now we get this nice, rubber-band, elastic easing here for our animations.

[01:38] Zoom left is just one of many pre-defined animations in ngFx. Another one of my favorites is rotate clock. Let's speed things up a little bit and put 700. Let's change it from elastic to back. Now, if we come over here and start filtering, we get this nice rotation animation with a nice back easing here. That's ngFx.