Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Switching TweenMax CSS Styles in "to function" to addClass

Recommended Posts

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

Link to comment
Share on other sites



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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.