Stickguy Posted November 3, 2020 Share Posted November 3, 2020 I am trying to achieve an effect where a section with a background image scrolls in. The background image should pin, and the content of the next few sections should scroll over it. The last of these sections should unpin the background and scroll out. I wrapped the sections I want to scroll inside a div, but when it pins, none of the content inside the div will scroll. Is there a better way to approach this? See the Pen jOrKGRx by Stickguy (@Stickguy) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 3, 2020 Share Posted November 3, 2020 Hey Stickguy. Instead of using a background image on the container element and pinning the container (which holds all of the content), you should use a separate element for the background and pin that instead: See the Pen eYzKrmJ?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Stickguy Posted November 3, 2020 Author Share Posted November 3, 2020 Thank you so much! Link to comment Share on other sites More sharing options...
RWalter Posted April 8, 2022 Share Posted April 8, 2022 Why does this only work with three panels? What do I need to adjust if I need 4 or five panels? Link to comment Share on other sites More sharing options...
akapowl Posted April 8, 2022 Share Posted April 8, 2022 Welcome to the GSAP forums @RWalter 31 minutes ago, RWalter said: Why does this only work with three panels? What do I need to adjust if I need 4 or five panels? It doesn't only work with three panels, but for every panel that you add you will have to adjust the end of the ScrollTrigger by 100% See the Pen MWrGGgR by akapowl (@akapowl) on CodePen Or as an alternative, making it more flexible set the end alongside an endTrigger, like this maybe You'll find more about end and endTrigger in the ScrollTrigger docs. Happy tweening! See the Pen yLpjjNr by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
RWalter Posted April 9, 2022 Share Posted April 9, 2022 12 hours ago, akapowl said: Welcome to the GSAP forums @RWalter It doesn't only work with three panels, but for every panel that you add you will have to adjust the end of the ScrollTrigger by 100% Or as an alternative, making it more flexible set the end alongside an endTrigger, like this maybe You'll find more about end and endTrigger in the ScrollTrigger docs. Happy tweening! Great. The second alternative is exactly what I need. 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