Switching TweenMax CSS Styles in "to function" to addClass

[jstafford 23 Likes (Newbie)]

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 avKrZJ; http: by jstafford (@jstafford) on CodePen

[Carl 9,066 Likes (Superhero)]

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 23 Likes (Newbie)]

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 23 Likes (Newbie)]

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/