Jump to content


containerAnimation toggling active class

Go to solution Solved by GreenSock,

Recommended Posts

Hi there,


I'm trying trouble adding and removing an active class on nav elements for both onEnter and onEnterBack of "panels" in an animationContainer. 


What's happening so far: on scroll the active class is added to the first, second and third ul li a elements, but then doesn't action on the fourth ul li a element. The same for scrolling back through the "panels".


Would somebody please give some insight on what I'm doing wrong here, I would really appreciate it!




See the Pen WNMaOBy by tracta_nz (@tracta_nz) on CodePen

Link to comment
Share on other sites

  • Solution

It's a logic thing - you've got each section activating when its left edge hits the left side of the viewport, but when the 4th panel hits it, the ScrollTrigger is finished and unpinned, thus there's no space where it would actually be active. 


I imagine it's more intuitive to consider a section "active" when it's the one filling more than 50% of the viewport, right? So instead of waiting for the left edge to hit the left side of the viewport, you'd have the left edge hit the center. You don't need to hack the helper function with those onEnter/onEnterBack callbacks. Instead, just use a ScrollTrigger for each section and leverage the toggleClass feature: 


See the Pen rNJqYYQ?editors=0010 by GreenSock (@GreenSock) on CodePen


Is that what you're looking for? 

  • Thanks 1
Link to comment
Share on other sites

Wow yes! Makes complete sense, thanks for taking a look!


Just a quick question on the onRefresh that you added:


// the following line is to work around a minor bug that'll be fixed in the release following 3.10.4
onRefresh: self => self.progress && self.progress < 1 && el.classList.add("active"),


Is this only required until 3.10.4 is released? 


Thanks again for your time

Link to comment
Share on other sites

1 minute ago, AdventurousDeveloper said:

Is this only required until 3.10.4 is released? 

No, the version AFTER 3.10.4 (which is the current version). But you can leave it in - it won't hurt anything in future releases. 

  • Like 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.