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