Angular - GSAP Transitions

Question

I'm fairly new to Angular so please bear with me.

This Angular - GSAP plunk (http://embed.plnkr.co/EUNyny/) demonstrates transitions between 3 pages where each page has a show function and a hide function that handles the animations on enter and on leave (link or back button).

//
// Directives
// ---------------------------
.directive('stage', function ($rootScope, $timeout) {
  return {
    restrict: 'A',
    link: function (scope, element) {
      TweenMax.set('#main', {perspective:500});
      scope.$on('$locationChangeStart', function (event, next, current) {
        scope.$broadcast('hide');
      });
    }
  }
})

What I would like is to have the option to use another transition (let's call it hide-new) instead of hide function whenever it suits me best.

For example use hide-new function when transitioning from page2.html to page3.html.

.directive('page2', function ($rootScope) {

  var show = function (id, done) {
    var tl = new TimelineMax({onComplete: done});
    tl.add(TweenMax.from(id, .6, {rotationX: -90}));
    tl.play();
  };

  var hide = function (id, done) {
    var tl = new TimelineMax({onComplete: done});
    tl.add(TweenMax.to('#element4', .4, {y: 100, opacity: 0}));
    tl.play();
  };

  var hide-new = function (id, done) {
    var tl = new TimelineMax({onComplete: done});
    tl.add(TweenMax.to('#element4', .4, {y: 100, opacity: 0}));
    tl.play();
  };

  return {
    restrict: 'A',
    link: function (scope, element) {

      show(element);

      scope.$on('hide', function (event, next, current) {
        hide(element, function () {
          scope.$emit('changeRoute');
        });
      });
    }
  }
})

Is something like that possible? Maybe with an ng-if?

Thanks in advance

Answer 1

I guess you could add a condition based on the new/current url:

scope.$on('$locationChangeStart', function (event, next, current) {
    if (next == 'test-next' && current == 'test-current') {
        scope.$broadcast('hide-new');
    }
    else {
        scope.$broadcast('hide');
    }
  });

After that, you have just to add another listener:

hideNewListener = scope.$on('hide-new', function (event, next, current) {
    hideNew(element, function () {
      scope.$emit('changeRoute');
      hideNewListener();
    });
  });