Jump to content
Search Community

Fixed navigation with scrolltrigger

Sam Smyth test
Moderator Tag

Go to solution Solved by Sam Smyth,

Recommended Posts

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

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?

  • Like 5
Link to comment
Share on other sites

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.

 

  • Like 5
  • Thanks 1
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.
×
×
  • Create New...