Jump to content
Search Community

CSS plugin bugs

Payman test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Recently we decided to update all our greensock libraries and everything in our app became broken. So basically css plugin stopped applying styles after applying it once.

 

See example:

 

In the old version the text shadow was red, but in the new it remains black. Maybe I am doing something wrong, let me know. 

See the Pen YWPaep by alecpro (@alecpro) on CodePen

Link to comment
Share on other sites

Hi Payman :)

 

Welcome to the GreenSock forums.

 

It looks like your pen is working as expected in FF and IE, but not in Chrome. It works fine for me in all browsers if written like this:

TweenLite.set($('.text'), {textShadow: '5px 5px red' });

Jack, Carl or one of the other mods may have the reason for that, but for now hopefully my info helps a bit.

 

Happy tweening.

:)

Link to comment
Share on other sites

  • Solution

To be clear. if you are loading TweenMax you do not need to be loading TimelineLite, TimelineMax, CSSPlugin etc separately. TweenMax.min.js includes:

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax
  • CSSPlugin
  • AttrPlugin
  • RoundPropsPlugin
  • DirectionalRotationPlugin
  • BezierPlugin
  • EasePack

Another note, do not load from /latest from the cdnjs cdn. They stopped keeping it current and it is not as safe as loading a specific version

//good
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js

//bad
https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js

If using version 1.18.5 of TweenMax doesn't help, please let us know.

Link to comment
Share on other sites

Carl - I saw the redundant files too and dropped in 1.18.5, but even with that change the second set() doesn't change the shadow color in Chrome unless it's textShadow. I'm curious about this myself.

// red doesn't get set this way in Chrome (FF and IE are fine for me)
TweenLite.set(".text", {'text-shadow': '5px 5px black'});
TweenLite.set(".text", {'text-shadow': '5px 5px red'});

// Chrome works fine like this
TweenLite.set(".text", {'text-shadow': '5px 5px black'});
TweenLite.set(".text", {textShadow: '5px 5px red'});

See the Pen Bzyxzq by PointC (@PointC) on CodePen

  • Like 1
Link to comment
Share on other sites

Ah, thanks for the clarification, Craig.

Very helpful. I'm not quite sure other than the fact that we have always advised to camelCase the hyphenated properties (not use 'text-shadow') so I'm happy to see that end is working properly. Still its worth digging into. I'll pass it up the ladder.

 

thanks!

 

c

  • Like 1
Link to comment
Share on other sites

This isn't really a "bug" per se because we specifically state in our docs that camelCase should always be used. It's kinda frowned-upon in the JS world to use hyphens in property names like that. GSAP has some specific logic that runs when the property name is textShadow that helps normalize the values that it gets from the browser, but since "text-shadow" was used here, that logic wasn't employed. Chrome was reporting the current (computed) style with the color FIRST in the list, like "black 5px 5px" and that doesn't match up right with "5px 5px red" (the color is last in the complex string). That's basically where things broke down. But again, "textShadow" has logic in CSSPlugin to normalize all that.

 

The moral of the story: always use camelCase :) 

  • Like 2
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.
×
×
  • Create New...