MaximeRou Posted June 15, 2020 Share Posted June 15, 2020 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 More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 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 1 Link to comment Share on other sites More sharing options...
MaximeRou Posted June 15, 2020 Author Share Posted June 15, 2020 Thank a lot Zach, for your tips and for you quick answer ! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now