Sam Smyth Posted March 18, 2022 Share Posted March 18, 2022 Bear with me - new to GSAP and I think I'm missing something simple. I am trying to ensure that this fixed box in the top right corner is always white when the menu is open. I'm able to do this, but I've added scrolltrigger to change the box to black when it reaches below the banner. This causes problems when you scroll past the banner and try to open and close the banner. What I have is somewhat close. To summarize what I would like to do: When menu is closed, box is white when above the banner and black when below the banner. When menu is open, box is white regardless of where you are on the page. When you close the banner, the box always returns to the correct colour (white when above the banner, black when below the banner) I really appreciate the help! See the Pen oNpbJPj by ssmyth93 (@ssmyth93) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 18, 2022 Share Posted March 18, 2022 I would use a class for this and make it so that when the menu is open the a class 'is-open' wins from the class 'is-triggered'. Making two separate timelines fight for the same element properties is really hard to manage. Below an example (Right now I'm updating the class with onEnter and onLeaveBack, but it should use triggerClass, but for some reason this is not working) See the Pen popgmPm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen I have no idea why, but the scrollTrigger function toggleClass isn't working, maybe someone else here can spot the problem? 5 Link to comment Share on other sites More sharing options...
akapowl Posted March 18, 2022 Share Posted March 18, 2022 33 minutes ago, mvaneijgen said: I have no idea why, but the scrollTrigger function toggleClass isn't working, maybe someone else here can spot the problem? The start and end are the same, so basically it enters and leaves (as well as enters back and leaves back) at the same point. toggleClass will toggle the class on each of enter/leave/enterBack/leaveBack, so the way I see it, it would add and remove the class at exactly the same points, which would result in the class never really being on the element - when it would be added, it would be removed at exactly the same time. Quote toggleClass String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. 5 1 Link to comment Share on other sites More sharing options...
Solution Sam Smyth Posted March 18, 2022 Author Solution Share Posted March 18, 2022 Thanks for the help, you two! I played around with it using your advice and it looks like I have it. Unless there are any issues with my code here that I'm unaware of, I believe I have my answer. See the Pen mdpPPLX by ssmyth93 (@ssmyth93) 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