Jump to content
Search Community

Bug on className tweens

AlexDrop test
Moderator Tag

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

Hy guys,

I love your library since the Flash times :)


I just found what I think is a bug. In the codepen link there is an example.



If you tween a class which name is contained in another class, the part of name of tweened class was subtracted on the other class

<div class="open-sub" id="tween"></div>

if I tween a class with the name "open"

TweenMax.to("#tween", 1, {className: "+=open"} );
// +=open or -=open produce same bug

the "open-sub" class will become "-sub"



Nothing breaking, but could lead in a very tricking result

See the Pen JGqjaN by anon (@anon) on CodePen

  • Like 1
Link to comment
Share on other sites

Hello AlexDrop and welcome to the GreenSock Forum!


This doesnt look like a GSAP bug,  but a codepen loading issue. Its running the code before the DOM and window is ready. You can see that if you look at the browser inspector net or network tab.


When i first opened in codepen i saw that -open.. but after a page reload i dont see it.


Have you tested this outside of codepen?


I tested on Windows 7 in Chrome, Firefox and IE11 and im not seeing it. Sometimes codepen will load code weird or incomplete.. since your code is being loaded within an iframe within codepen.


Here is your codepen using codepen FULL mode which loads your code without an iframe. And i see the proper class being added


See the Pen yeWyYJ by jonathan (@jonathan) on CodePen


This looks like a codepen issue on load. Looks like the DOM and window is not ready before codepen applies your JS code. So you can also add some event handlers to make sure the JS code only runs when the DOM is ready and the window is fully loaded.



Link to comment
Share on other sites

Yes, I discover this in my project. 


I'll try to call the tween with a delay, so you can check the dom change in realtime



Edit: Just opened your link, same problem with me. Chrome 48


Thanks for your reply :)


Re-edit: :D

The problem was not the class to add, the class is added correctly, the problem is that the tween mess with the other classes that contain the same string. "Open-sub" become "-sub".

Link to comment
Share on other sites

I just added a DOM ready event and i dont see it happen on first load


Again this is happening because the DOM isnt ready when the code runs in codepen


See the Pen yeWyYJ by jonathan (@jonathan) on CodePen


Tested in latest  IE11, Firefox Chrome on Windows 7 (64-bit)


When i run your code locally outside of codepen i dont see this happening.


Lets see if others are seeing the same thing..



Link to comment
Share on other sites

Hmm weird im not seeing that behavior


What OS are you seeing this on Windows or an Apple device?


But like i said i even exported and downloaded the codepen and dont see just -sub class without the word open


You can find the export button in codepen in the bottom right corner.


Maybe some other people can chime in and see if they see the same on their computer, since im not seeing that on first load.


If not maybe GreenSocks Carl and Jack and look into this ;)


Thanks for your patience AlexDrop :)

Link to comment
Share on other sites

Windows 10, Chrome 48.

I found the problem in a project with the actions set on dom ready with jQuery, so I don't think depends on codepen, but if you don't have the same behavior I don't know what could be the problem.



http://www.fratelliguzzini.com for your curiosity and pleasure :D




Final codepen demo. Sorry but i don't have an account, so I think can't link a fullpage view


See the Pen gPJpXg by anon (@anon) on CodePen

Link to comment
Share on other sites

Thanks Craig and Zach for testing Alex's codepen link..


Try this .. since there are known bugs for Windows 10 and Chrome as far as loading slow.


Test the codepen in Incognito Mode (Private Browsing) window.


The Chrome Dev Team recommends when debugging and testing code in Chrome. For you to always test in Incognito Mode (Private Browsing) so you dont skew results and loading since extensions and other factors not in Private Browsing mode a affect what you see in Chrome Dev Tools.


Try that and at least we can see if other still see on Windows 10 in Chrome 48 in a Private Browsing Window. ;)



Link to comment
Share on other sites

o.k. - this is a little weird. Now I'm seeing it in Chrome 48 on Windows 7 too.


I pulled the pen down for local testing and I do see this in all browsers Win7/Win10. For clarity sake, I made the class of .-sub into .open-sub. If you use a hyphen in the .open-sub class name, the bug appears, but if you use an underscore instead everything works as expected.

Link to comment
Share on other sites

Thanks for reporting this and yes, it looks like a very rare edge case that needs to be fixed. It'd only happen when you're using a substring that already exists in the list of classes and there's a hyphen or underscore directly next to it. I should have a solution for you tomorrow. Please stand by.

  • Like 4
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...