tomividi Posted February 25, 2022 Share Posted February 25, 2022 I am new to gsap and scrolltrigger and I am trying to work on a scroll based website where panels overlap each other. I am trying to achieve a similar effect as seen on https://www.colabgroup.com (this seems to be a custom coded solution and not gsap based). I am trying to fix the following issues: How can I make sure that #panel-1 is shown first before the gsap animation is initiated and the browser window is at the top (as I am positionings other panels absolute, they overlap and only move away with a delay, as gsap loads) In general how can I preserve scroll position and timeline position on refresh? There seems to be a some scroll bar jumping when #panel-4 comes in, as this panel is taller than 100vh and is entering the viewport overlapping the previous panel from the bottom. How can i control this? Thanks very much for any help on this. My best, Tomividi See the Pen vYWjaRP by tvielmetter (@tvielmetter) on CodePen Link to comment Share on other sites More sharing options...
Trapti Posted February 25, 2022 Share Posted February 25, 2022 See if this helps in overlapping sections. See the Pen OJjBEMg by tripti1410 (@tripti1410) on CodePen 1 Link to comment Share on other sites More sharing options...
tomividi Posted February 25, 2022 Author Share Posted February 25, 2022 Thanks @Trapti, but I fail to see how your solution fixes any of the issues I am asking about. Also there are several flickering issues in your solution and content cannot be scrolled to on smaller screens. I appreciate any help with the stated issues in my original question. Link to comment Share on other sites More sharing options...
Trapti Posted February 25, 2022 Share Posted February 25, 2022 ok, My pen was just to give idea on overlapping. that pen is not a finished product. As of now I cannot look it your issue as it will take some time, hope someone helps. Link to comment Share on other sites More sharing options...
tomividi Posted February 25, 2022 Author Share Posted February 25, 2022 Thanks for trying to help, it is appreciated! But unfortunately my issue is not to achieve overlapping (that is working in my codepen). Link to comment Share on other sites More sharing options...
OSUblake Posted February 25, 2022 Share Posted February 25, 2022 4 hours ago, tomividi said: How can I make sure that #panel-1 is shown first before the gsap animation is initiated and the browser window is at the top (as I am positionings other panels absolute, they overlap and only move away with a delay, as gsap loads) You would need to do that in your CSS to prevent FOUC. test scrolltrigger sandbox (codepen.io) 4 hours ago, tomividi said: There seems to be a some scroll bar jumping when #panel-4 comes in, as this panel is taller than 100vh and is entering the viewport overlapping the previous panel from the bottom. How can i control this? The overflow of the container is messing with it. I would suggest reworking that last panel, like maybe removing if from the panel container, and just have the panel container with position fixed. That's what the site you linked to is doing. 4 hours ago, tomividi said: In general how can I preserve scroll position and timeline position on refresh? Fix the last panel and it should be fine. I only see it jump when you the last panel is visible and the ScrollTrigger has ended. 1 Link to comment Share on other sites More sharing options...
tomividi Posted February 26, 2022 Author Share Posted February 26, 2022 @OSUblake Thanks so much for your answer. The FOUC documentation has helped me in fixing the content stacking before the JS is initiated. I have integrated the fix in my original codepen. 15 hours ago, OSUblake said: The overflow of the container is messing with it. I would suggest reworking that last panel, like maybe removing if from the panel container, and just have the panel container with position fixed. That's what the site you linked to is doing. Thank you for your pointers regarding the scrollbar jumping with the last panel. I have tried a bit around with fixed state on the panel-wrapper and shifting the last panel out of the panel-wrapper, but was not successful. Would you be able to further elaborate the approach you are suggesting? I feel like I am mostly just trying stuf out, as I have no proper concept of what is wrong here and how it would be done right. Thanks again for your help, it is much appreciated! Link to comment Share on other sites More sharing options...
tomividi Posted March 1, 2022 Author Share Posted March 1, 2022 I was able to fix the issues in the original codepen. The way I fixed this is that: - I completely disabled pinning within ScrollTrigger - made all overlapping elements fixed to top and with a negative z-index and wrapped by a relative container 300vh wrapping the fixed elements. - I used then the wrapping container as the scrollTrigger container - The 4th container receives a top margin of 200vh in order to time when it scrolls over the fixed elements (because the fixed elements have a negative z-index, this relative element scrolls over the fixed elements) I am not sure this is the the best solution, as the content does not stack naturally if JS is disabled and it has limited accessibility, but at least the animation works properly without flickering and a browser reload also keeps the scrollposition/animation state properly, so anchor linking will work properly. Thanks, T 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