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

i'd use tweenmax animation in angularjs project, , instead of justwriting code in controller, i'd correct way, , use via directive.

here's element:

<ul>   <li class="foo">a</li>   <li class="foo">b</li>   <li class="foo">c</li> </ul> 

here's animation:

var ease = elastic.easeout;  tweenmax.staggerfrom(".foo", 1.5, {   scale: 0.7,   opacity: 0,   delay: 0.5,   ease: ease }, 0.1); 

how do wrap in directive?

you can have directive on wrapper element below, have element.children() apply effect on each dom 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