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
How can I get TweenMax easings to work along with Eslint?
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