LeeT Posted April 7, 2022 Share Posted April 7, 2022 This is a basic example of what I'm trying to do. As a scroll trigger event is triggered, I'm trying to have it where there is no whitespace e.g. the red div scrolling up. I'd like to fix the above/below sections in place while the scroll trigger functionality scrolls through the text (changing to blue individually). Essentially it would hit the section, stay there while the scroll animates the color change - and then once done scroll onwards without any whitespace being introduced at any point. Please let me know if that isn't clear enough and I'll try to make it a bit of a better example. See the Pen yLpKWgb by ltoye (@ltoye) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted April 8, 2022 Solution Share Posted April 8, 2022 Hello @LeeT, welcome to the GSAP forums. Wrap everything that might be visible at that point in a div and pin that div instead to omit that whitespace showing. I just wrapped all the content in a div in the example below - you might want to be more selective though. Important: For any subsequent ScrollTriggers within that same wrap (and thus within that same pin-spacer) you will have to use the pinnedContainer property then. See the Pen ExoLPRW by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
LeeT Posted April 8, 2022 Author Share Posted April 8, 2022 @akapowl That did the trick thanks!. In the live project it's built out in React components so wrapping an outside container wasn't possible however I pinned using the main page outermost container class and worked like a charm. Saved me a ton of time much appreciated. 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