Search code examples
javascriptangularjsanimationangular-directive

Trigger ngFx animation from the javascript code

I'm trying to use ngFx library to play animation when a property changes on the scope. I've created a boilerplate code for directive: 

angular.module('myApp')
.directive('zoomInOnChange', function () {
    return {
        restrict: 'A',
        scope: {
            param: "="
        },
        link: function (scope, element, attrs) {
            scope.$watch('param', function () {
                // ?
            });
        }
    }
});

and want to use it like this:

<h1 zoom-in-on-change param="{{someProp}}">{{someProp}}</h1>

Is there a way to trigger ngFx animations from inside the javascript code?

Solution

  • As it turned out, it's way simplier to implement animation working directly with TweenMax, which ngFx uses under the hood. That line of code solved my problem:

    TweenLite.from(element, 0.5, {scale: 0, ease:Expo.easeIn});