ESLint抱怨Angular应用中的GreenSock

Question

I'm working on a small Angular app which is using GreenSock's Draggable plugin. Everything works as expected; however, I'm using ESLint and it is complaining that TweenMax and Draggable are not defined.

74:7   error  "Draggable" is not defined                                            
133:7   error  "TweenMax" is not defined
133:78  error  "Bounce" is not defined

I have function that sets up a draggable element in my controller and a few tweens in the controller as well:

// Set up GreenSock Draggable dial
function setUpDraggableElement(element) {
  Draggable.create(element, {
    type: 'rotation',
    onPress: onDialTouch,
    onRelease: onDialRelease,
    onDrag: onRotateDial,
    liveSnap: function(endValue) {
      return Math.round(endValue / 20) * 20;
   }
  });
}

...

TweenMax.to(angular.element('.selector'), 0.5, { scale: 1.1, ease: Bounce.easeOut});

I'm new to Angular; do I need to wrap them in some sort of directive or something?

Answer 1

If your application works as expected, I believe this is just a problem with ESLint.

GSAP is defining "Draggable", "TweenMax", and "Bounce" in one file (or each in its own file) and you are using those names in a different file. ESLint looks at the files individually , so it is warning that the names have not been defined.

What you need to do is notify ESLint that "Draggable", "TweenMax", and "Bounce" are global variables (defined outside of the file). Something like this:

/*global Draggable, TweenMax, Bounce*/

Answer 2

Here is the full list, just add it to the ESList config file the same way (I assume its the same way, I'm currently using JSHint).

https://greensock.com/forums/topic/13416-using-tweenmaxgsap-with-gulp/