Jump to content

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

ClassName overwrite all classes

Recommended Posts

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

Link to comment
Share on other sites

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

  • Thanks 1
Link to comment
Share on other sites

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

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.