ClassName overwrite all classes

[MaximeRou]

Hello everyone,

 

I'm doing an animation with a big overlay on page so I'm using the timeline of TimelineMax but I have issue when I'm using .className.

To be brief, when I'm using className, it remove all classes on my element and I don't understand why it overwrite it all.

Should I write it differently to keep existing classes ? Or is it possible to add an overwriting setting for .className ?

 

This is a codePen that I simplify to troubleshoot : 

 

Thanks in advance

See the Pen ZEQpWJe by FrenchCooder (@FrenchCooder) on CodePen

[ZachSaucier]

Hey MaximeRou and welcome to the GreenSock forums! 

 

Several notes:

• Max/Lite is old. Just use gsap.to() or gsap.timeline() in GSAP 3. See the migration guide for more info.
• A tween of 0 duration doesn't make much sense. Use .set() instead.
• You don't need document.ready because scripts are loaded at the bottom of the body. 
• You can just use selector string instead of DOM or jQuery references if you want to.
• className tweening was removed in GSAP 3. You can either just use .classList.add() (which I recommend) or add support for className tweens.

Here's how I'd do it:

See the Pen OJMRXmb?editors=0010 by GreenSock (@GreenSock) on CodePen

[MaximeRou]

Thank a lot Zach, for your tips and for you quick answer !