Tweenmax ease and ESLINT

0
votes

I'm using Babel's ES6 transpiller and Tweenmax as my animations library, and it provides some objects that stores easing's curve, such as Back, Sine, etc.

Thing is that I'm using Eslint aswell, and these easing objects break the no-undef rule (which i don't want to disable).

JS example:

import TweenMax from 'gsap';

TweenMax.fromTo('.header__logo', .5, {y: -70, alpha: 0}, {y: 0, alpha: 1, delay: .4, ease: Back.easeOut});

Console:

   97:98   error  "Back" is not defined         no-undef
   98:110  error  "Back" is not defined         no-undef
   99:109  error  "Back" is not defined         no-undef
  105:85   error  "Sine" is not defined         no-undef
  107:117  error  "Back" is not defined         no-undef
  108:125  error  "Back" is not defined         no-undef
  127:96   error  "Sine" is not defined         no-undef
  133:98   error  "Back" is not defined         no-undef
  134:151  error  "Back" is not defined         no-undef
  159:103  error  "Sine" is not defined         no-undef
  160:111  error  "Sine" is not defined         no-undef
  165:97   error  "Back" is not defined         no-undef
  166:109  error  "Back" is not defined         no-undef
  167:108  error  "Back" is not defined         no-undef

Question

How can I get TweenMax easings to work along with Eslint?

1
javascriptwebpackeslintgsap

1 Answers

4
votes

Ok, i've figured out.

The fastest way is to add GSAP variables to the globals property in the .eslintrc file

  "globals": {
    "TimelineLite" : false,
    "TimelineMax" : false,
    "TweenLite" : false,
    "TweenMax" : false,
    "Back" : false,
    "Bounce" : false,
    "Circ" : false,
    "Cubic" : false,
    "Ease" : false,
    "EaseLookup" : false,
    "Elastic" : false,
    "Expo" : false,
    "Linear" : false,
    "Power0" : false,
    "Power1" : false,
    "Power2" : false,
    "Power3" : false,
    "Power4" : false,
    "Quad" : false,
    "Quart" : false,
    "Quint" : false,
    "RoughEase" : false,
    "Sine" : false,
    "SlowMo" : false,
    "SteppedEase" : false,
    "Strong" : false,
    "Draggable" : false,
    "SplitText" : false,
    "VelocityTracker" : false, 
    "CSSPlugin" : false,
    "ThrowPropsPlugin" : false, 
    "BezierPlugin" : false
  }

Properties retrieved from Green Sock forum