Violetta Posted June 2, 2020 Share Posted June 2, 2020 If I want to toggle a class on another object, the class "undefined" is set instead of the one I want. Here the example: See the Pen WNrNNap by alsodenn (@alsodenn) on CodePen 1 Link to comment Share on other sites More sharing options...
cTigerDev Posted June 2, 2020 Share Posted June 2, 2020 still new to this myself but here is a script i did to toggle a class on enter and leave of the target object to add/remove a class. Hope it helps: $(".test").each(function() { // Content Reveal Animation ScrollTrigger.create({ trigger: ".test", start: "top 80%", end: "bottom 100px", onEnter: () => $(this).addClass('revealed'), onLeave: () => $(this).removeClass('revealed'), onEnterBack: () => $(this).addClass('revealed'), onLeaveBack: () => $(this).removeClass('revealed'), }); }); 1 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted June 2, 2020 Share Posted June 2, 2020 @Violetta, This does appear to be a bug when passing in an object to toggleClass. Link to comment Share on other sites More sharing options...
GreenSock Posted June 2, 2020 Share Posted June 2, 2020 I'm so sorry about that - it was just a typo in the docs. It's "className", not "class". toggleClass: {targets: ".c, .a", className: "active"} 9 Link to comment Share on other sites More sharing options...
Violetta Posted June 2, 2020 Author Share Posted June 2, 2020 Now it works! Thanks for the quick response :-). 1 Link to comment Share on other sites More sharing options...
heyitsA Posted October 17, 2020 Share Posted October 17, 2020 Hi! Few questions: 1) What if I want to add different classes to each target? for example set .leave to .box1 and .active to .box2 and .hide to .box3 2) If I want the toggled class to stay on scrolled pass the trigger, I've read that is what onEnter, onLeave, onEnterBack, onLeaveBack is for and not the toggleClass, but don't know how to use it. 3) Is it better to create a timeline and add the effects on GSAP instead of creating CSS classes? I had this made with ScrollMagic but want to switch to GSAP's ScrollTriger. This is where I'm at See the Pen XWKdxZR by esadrian (@esadrian) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 17, 2020 Share Posted October 17, 2020 24 minutes ago, heyitsA said: What if I want to add different classes to each target? for example set .leave to .box1 and .active to .box2 and .hide to .box3 Use the callbacks to apply whatever classes you want to whatever elements you want. 25 minutes ago, heyitsA said: onEnter, onLeave, onEnterBack, onLeaveBack is for and not the toggleClass, but don't know how to use it. The docs are great for learning how to use things In this case you might want to add the class in the onEnter and remove the class in the onLeaveBack (if you want the effect to play again the next time - if you don't want that just use once: true). 27 minutes ago, heyitsA said: Is it better to create a timeline and add the effects on GSAP instead of creating CSS classes? Usually I opt for actual animations instead of toggling CSS classes but for certain things it might make sense to use classes. 1 Link to comment Share on other sites More sharing options...
heyitsA Posted October 17, 2020 Share Posted October 17, 2020 Thanks for the response, Zach. I gathered every toggle in a new function and called it onEnter and onLeaveBack. I was also missing .classList on the toggle and got wrong onEnter: () => function() { instead of onEnter: () => {. I did read the docs before posting, but my understanding was not that great with the example shown . At least I finally got it right! haha See the Pen RwRavdd by esadrian (@esadrian) on CodePen 1 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