Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DavidBrowne

ScrollTrigger - if target is already above starting scroll position?

Recommended Posts

Hi, I'm trying to just do a add class when certain elements come into view, specifically when the top of these element hit the center of the viewport.

 

So 'top center' as the start position. Works great, the issue is if one of the target elements is already positioned above the center of the viewport when the page loads, or is near the center of the viewport, the adding of the class is never triggered or only sometimes triggered, but I need to be. (view the codepen full screen to force the top item to be at the top of the viewport to see what i mean)

short vid to show what i mean - https://www.loom.com/share/65bad6abdf224d2eb6595e0a76a0fbd1 (notice the third item seems to behave unpredictably, due to where it is positioned on the page when it loads)

 

I wondering if there's a better way to approach this, I really just need it so that any of these elements that is above the center of the viewport should have the active class, anything below does not.

 

Is there something built into scrolltrigger that covers this? or if it's just a case of needing to add some extra JS outside of the scroll trigger function to work out the starting positions and add the class seperately?

 

 

See the Pen XWamyge?editors=0010 by wplit (@wplit) on CodePen

Link to comment
Share on other sites

Sure, how about this?:

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

 

The issue with the way you were attempting it was that you had logic issues due to the fact that onEnterBack would only occur if you go PAST the end position (which you had set to 30px more than the height of the element, creating a relatively large gap) and then come backward into the active area. 

 

Just use toggleClass and an end value that's super big (so that it never hits the end). 

  • Like 2
Link to comment
Share on other sites

Ah, so simple. So it basically already does what I needed out of the box, I was just messing it up by adding the extra bit on the end that wasn't needed.

 

Thanks alot.

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