applying cLassName property to hypen separated class

[bromel]

Hello all

 

Just something I noticed

 

In gsap I can change tween or change a class by simply doing

TweenMax.to(myClass,.3,{className:"yourClass"});

so we can tween myClass to yourClass, but I get a console error if the classname has a '-' in it for example

TweenMax.to(myClass-hypen,.3,{className:"yourClass"});

The following console msg proceeds:

Uncaught TypeError: t.split is not a functionse @ TweenMax.min.js:15l.parse @ TweenMax.min.js:15l.parse @ TweenMax.min.js:16ye.parser @ TweenMax.min.js:16l._onInitTween @ TweenMax.min.js:16n._initProps @ TweenMax.min.js:16n._init @ TweenMax.min.js:16n.render @ TweenMax.min.js:17l.render @ TweenMax.min.js:14n.render @ TweenMax.min.js:16O._updateRoot.D.render @ TweenMax.min.js:16n.dispatchEvent @ TweenMax.min.js:16g @ TweenMax.min.js:16

So I am assuming that the Classname property does not like changing hyphenated classes although the '+=' and '-=' atributes work as expected.

 

Any thoughts?

 

bromel

[Shaun Gorneau]

Where you are using myClass ... that's an object, not a string. Just like in naming any variable, hyphens are not allowed. If I did the following

a = 0;
b = 1;
a-b = 2; // <- I'm saying a minus b = 2

If you want to tween a class name (with or without a hyphen), reference the object with the class selector

TweenMax.to(".myClass-hypen", .3, {className:"yourClass"});

See the Pen GpRaRe by sgorneau (@sgorneau) on CodePen

[bromel]

Hi Shaun,

 

Thanks again,

 

Yes you are very right, I think it was a case of me not paying attention to my coding, In this particular case my vars got the better of me.

 

regards

 

bromel