How to create a super simple AngularJS directive for using GSAP TweenMax?

Question

I'd like to use a TweenMax animation in my AngularJS project, and instead of justwriting the code in a controller, i'd like to do it the correct way, and use it via a directive.

Here's my element:

<ul>
  <li class="foo">A</li>
  <li class="foo">B</li>
  <li class="foo">C</li>
</ul>

Here's my animation:

var ease = Elastic.easeOut;

TweenMax.staggerFrom(".foo", 1.5, {
  scale: 0.7,
  opacity: 0,
  delay: 0.5,
  ease: ease
}, 0.1);

How do I do wrap it in a directive?

Answer 1

You can have directive on wrapper element like below, that would have element.children() which will apply that effect over each DOM by queuing them up.

Markup

<ul tween-max-stragger>
    <li class="foo">A</li>
    <li class="foo">B</li>
    <li class="foo">C</li>
</ul>

Directive

.directive('tweenMaxStragger', function() {
    return function(scope, element, attrs) {
      var ease = Elastic.easeOut;
      TweenMax.staggerFrom(element.children(), 1.5, {
        scale: 0.7,
        opacity: 0,
        delay: 0.5,
        ease: ease
      }, 0.1);
    }
})

Codepen

Answer 2

If you're not using ng-repeat in the list, you can do something like this.

angular.module('myApp')
  .directive('fancyList', function() {
    return {
      restrict: 'C',
      link: function(scope, elem, attrs) {
        TweenMax.staggerFrom(elem.find('li'), 1.5, {
          scale: 0.7,
          opacity: 0,
          delay: 0.5,
          ease: Elastic.easeOut
        }, 0.1);
      }
    };
  })

And then write your html like this:

<ul class="fancy-list">
  <li>A</li>
  <li>B</li>
</ul>

You can't really write a directive on each of your <li> elems because they're all dependent on the previous animation. The next best thing to do is write a directive for the parent element that wraps all staggered animations.