Switching TweenMax CSS Styles in "to function" to addClass

[jstafford]

Tweenmax doing the CSS Styling in "to function" - works , no problems; would like to transition to the following codepen below

See the Pen avKrZJ by jstafford (@jstafford) on CodePen

 

CSS Classes in External Stylesheet Added by TweenMax - not working

See the Pen YyvbeO by jstafford (@jstafford) on CodePen

 

Hello Greensock Community,

 

I have been doing my CSS Styling in the To funtion of Tweenmax without any problems. Due to the verbose nature of mixing styling with my javascript code , I am refactoring what I have so that the classes are added by TweenMax from a seperate stylesheet. I can't get it to work. It probably is something basic as this is my first time working with className=+ type of syntax with gsap.

 

I am using an older versioin of TweenMax right now because I originally wrote the syntax of the css stylings using 1.84 without fully seperating each property out ; eg. bottomBorder: "1 px solid #000" (not allowed in newer versions of TweenMax I found out --> bottomBorderColor, bottomBorderWidth, etc.Don't think this has anything to do with my problem here with adding className, but I wanted to clarify why my codepens were using an older TweenMax

 

The codepen link below is accidently composed of the two links above that are seperated.

See the Pen by jstafford (@jstafford) on CodePen

[Carl]

Hi,

 

Sorry to hear you are having trouble. It would really help if you could reduce this down to a single tween, describe the end result you expect and explain what you are seeing instead like "the text should have a red color but it does not".

 

There really doesn't need to be any responsive stuff, conditional logic, or mouse events if your claim is that a css style isn't being set.

 

I tried looking at your demo but really had no idea what was working and what wasn't. I'm sure if you can simplify it we will be able to help

[jstafford]

Okay, I will come up with a simplified and better explained codepen. I had already ommitted about 90% of the stuff already , but I understand that things aren't always clear when looking at someone else's code.

[jstafford]

Her is the new topic with cleaner codepen and better explanation. I actually got the className method to work somewhat when refactoring, but it still is having problems.

 

http://greensock.com/forums/topic/12759-converting-tweenmax-styling-with-css-properties-to-tweenmax-styling-by-using-classname-nameofclassinstylesheet/