This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Introduction to ngFx for Angular animations

    Scott MossScott Moss

    ngFx is an amazing animation library built on top of ngAnimate using Greensock Animation Platform. This quick introduction will have you animating your Angular apps today.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss