tfleming Posted February 11, 2021 Share Posted February 11, 2021 Here is a Figma design of what I'm looking for.Figma Design For this design I'm looking to take over the users scroll and slide a div container up. Once the div container hits the end trigger the page scrolls normal. The page is essentially fixed in the background until that div hits the end trigger. Im looking for any examples or quick mock ups of something similar to work off. Any help is greatly appreciated. Thanks! Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted February 11, 2021 Solution Share Posted February 11, 2021 Hey tfleming and welcome to the GreenSock forums. In order to get this effect, I would pin all of your content (i.e. a container of all of your content, probably not the <body>) using ScrollTrigger. I would attach a tween that moves your green box as necessary to that ScrollTrigger and apply a scrub. Job done The ScrollTrigger docs and demos page can help you get started with ScrollTrigger. Some pseudo-code: gsap.from("#greenBox", { yPercent: 200, // or y scrollTrigger: { trigger: "#contentContainer", pin: true, start: "top top", end: "+=500px", scrub: 0.5 } }); 2 Link to comment Share on other sites More sharing options...
tfleming Posted February 11, 2021 Author Share Posted February 11, 2021 @ZachSaucier Thank you a ton. This helped alot! Im running into one small issue. I included my codepen for it (Open the Codepen in full screen to see what is happening) See the Pen KKNNvmz by tyler-fleming (@tyler-fleming) on CodePen The Hero is now pinned and the green box is moving up. My only issue is now the content below is also being pushed down and moving with the green box. The content below should not be moving, only the green box should be moving into the hero until it hits the end point. Ive tried adding the #contentContainer to a different container but that isnt working either. Is there a way to make sure only the green container is moving with the scroll? Thanks again for the help!! Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 11, 2021 Share Posted February 11, 2021 Like I said, you need to pin a container for all of your content: See the Pen XWNNexG?editors=1000 by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 11, 2021 Share Posted February 11, 2021 Side note: You shouldn't be loading and combining both ScrollMagic (not a GSAP product) & GreenSock's official ScrollTrigger Plugin. var controller = new ScrollMagic.Controller(); gsap.registerPlugin(ScrollTrigger) ScrollTrigger is all that you need, it easily replaces all the features and has way more magic. 😉 3 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