ferriss Posted January 9, 2023 Share Posted January 9, 2023 Hi, I've seen this example of scroll and pullover, but not seen the inverse of this. Is it possible? https://www.polybion.bio/ I've attached my base, I basically want to scroll and section one scroll up and once the bottom of section one hits the top, the next section pulls pull and then once the bottom of that hits the top, the next one pulls up. Currently they all scroll, but section 2 should say fixed until section 1's bottom hits the top. Thanks, Tom See the Pen bGjqdJE by CHEWX (@CHEWX) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 9, 2023 Share Posted January 9, 2023 Hi, Mostly this has to do with initial setup. Also is better to create a timeline so you can add animations on each section (like in the website you posted). Hopefully this approach is a good starting point: See the Pen NWBpNBG by GreenSock (@GreenSock) on CodePen Let us know if you have more questions. Happy Tweening! Link to comment Share on other sites More sharing options...
ferriss Posted January 10, 2023 Author Share Posted January 10, 2023 Thanks for your post. The initial setup is for a reason as all sections need to be at the top in theory. The example you’ve posted is the opposite I want, I’d like the inverse. So only the layer that’s on top will scroll. Underneath doesn’t scroll until top layer is out of view at the top. Link to comment Share on other sites More sharing options...
ferriss Posted January 10, 2023 Author Share Posted January 10, 2023 I've just updated the original pen with a working version, not sure if it's the best way to code it as adding the heights together seems an odd way to do things? Link to comment Share on other sites More sharing options...
Rodrigo Posted January 10, 2023 Share Posted January 10, 2023 Hi, If it's working in the way you intend and you're getting the results you want/expect then there is nothing wrong with your setup. Perhaps the only thing I would change is use yPercent instead of passing a string to the y tween of each panel: gsap.to( box, { // y: '-100%', yPercent: -100, ease: 'none', scrollTrigger: { trigger: '.block-overlap__section--' + ( i + 1 ), start: `+=${boxHeights}px top`, end: `+=${boxSize.height}px`, // markers: true, scrub: true } }); That will work in the exact same way with the difference that GSAP won't have to parse the string you're passing and apply the percentage value directly on the transform matrix, like that you can pass a number. Normally for fully responsive animations we recommend using yPercent/xPercent since it's more intuitive once you get going with GSAP's syntax. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
ferriss Posted January 12, 2023 Author Share Posted January 12, 2023 Great thanks. I have a side-effect issue, whereby because each section is fixed. How do I apply other GSAP animations as the trigger positions are wrong, for example one section might be 100px from the top, but really you need to scroll 3100px to get to it, but because it's fixed the trigger start position is 100px. Link to comment Share on other sites More sharing options...
Rodrigo Posted January 13, 2023 Share Posted January 13, 2023 Hi, It seems you figured it out by adding the current height to a variable in order to use that as the starting point of each section?: // Start at height of first box let firstBox = boxes[0].getBoundingClientRect(); let boxHeights = firstBox.height; // Get boxes without first boxes = gsap.utils.toArray('.block-overlap__section:not(:first-of-type)'); boxes.forEach((box, i) => { const boxSize = box.getBoundingClientRect(); gsap.to( box, { y: '-100%', ease: 'none', scrollTrigger: { trigger: '.block-overlap__section--' + ( i + 1 ), start: `+=${boxHeights}px top`, end: `+=${boxSize.height}px`, scrub: true } }); // Add to scroll height to determine next start point boxHeights = boxHeights + boxSize.height; }) Please let us know if this is solved or you're still having issues as I see it working in the way you describe on your updated codepen example. Happy Tweening! 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