Search code examples
javascriptangularjsgsapeslint

ESLint complaining about GreenSock inside Angular app

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?

Solution

  • 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*/