Skilltech Posted January 9, 2022 Share Posted January 9, 2022 Hi, Love the smoothness of gsap, interested in buying business green and I'm trying to make sure it works for creating parallax image backgrounds with ScrollTrigger, smooth-scrollbar.js and scrollerProxy() combined. I saw a working parallax backgrounds pen (1) and this is the desired behavior: See the Pen YzwjKYG by ChrisCrossCrash (@ChrisCrossCrash) on CodePen I also saw your pen(2), the implementation of smooth-scrollbar.js with scrollerProxy(): See the Pen oNLqgBm by GreenSock (@GreenSock) on CodePen I made a combination of those two pens, I used effects from pen 1 and setup from pen 2 and got an almost working result but... The issue: The parallax background images are all over the place. You can see the result in my pen, make sure to make the preview window tall enough. Please tell me what I'm doing wrong, thanks. MY PEN: There are four images/sections in total. Notice how, around the second/third image it goes wrong. P.S. The smooth-scrollbar.js works correctly on its own and gsap works correctly on its own. See the Pen MWEqpqY by MrGordonFreeman (@MrGordonFreeman) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted January 9, 2022 Share Posted January 9, 2022 Hello @Skilltech First things first (before I forget to mention it): <main id="primary" class="site-main"> <main id="primary" class="site-main"> You are opening your main twice in your HTML markup, so for the examples below I removed one of those opening tags. Elements with position: fixed (and I assume the same will be the case for background-attachment: fixed) will not work the way you'd expect with a smooth-scrolling library as such. Since the smooth-scrolling is created by applying transforms to a parent-container, these transforms will change the context for the 'fixed'. Instead of where you want to fix them, they will just appear scrolling with the flow when they are inside that parent. So that probably is nothing related to GSAP but in the 'nature' of how that smooth-scrolling works. A suggested workaround by idiotWu for when you need to have your elements inside that parent container and can not simply put them outside is to be found in this issue-thread on smooth-scrollbar's GitHub. https://github.com/idiotWu/smooth-scrollbar/discussions/362#discussioncomment-854090 Basically it adjusts the top-value of an element all the time while scrolling, so it appears to be 'fixed'. I added it in the pen below (alongside overflow: hidden on the section.parallax-background-section) to show how it could work - you could probably do something similar to that in an onUpdate function of a ScrollTrigger, too, if you wanted. See the Pen OJxoxNY by akapowl (@akapowl) on CodePen Edit: ...and here is another version with the 'fixed-correction' happening in the onUpdate of the ScrollTrigger, as I mentioned before. See the Pen oNGPGQJ by akapowl (@akapowl) on CodePen 3 1 Link to comment Share on other sites More sharing options...
Skilltech Posted January 10, 2022 Author Share Posted January 10, 2022 Hi @akapowl and thank you for such a fast response, Also, THANK YOU for solving this issue for me AND for providing the onUpdate version. I have one final question, I opened your (and then my) pen on mobile after reading your reply and the performance is so slow that the effect is completely unusable. The question: Do you have any suggestions on how to treat this on mobile or, more importantly, do you think there is a proper, better way of achieving this same effect? Once again, thanks a lot. P.S. the duplicate <main> was a typo I only made on codepen Link to comment Share on other sites More sharing options...
akapowl Posted January 10, 2022 Share Posted January 10, 2022 That example pen you posted first uses images with a resolution of 1920x1920.... and is already not the smoothest for me on mobile. That is a lot of pixels on the browser rendering side in combination with the effect. The images you are using in your demo are quite a bit larger even (about 4 and 5.5 times the pixel count in comparison to that other pen) and probably very heavy on the browser rendering side. Using optimized images should already help a lot with performance. 3 Link to comment Share on other sites More sharing options...
Skilltech Posted January 10, 2022 Author Share Posted January 10, 2022 @akapowl you are THE MAN. I am using small images actually, I tried out the codepen's feature i.e. loading images from codepen's "assets" section because in many pens I visited it struggled when pulling images from other websites causing those pens to load incorrectly. Thanks a lot again and I'll continue to use gsap in my production and join the club when I'm ready to publish. 1 Link to comment Share on other sites More sharing options...
akapowl Posted January 10, 2022 Share Posted January 10, 2022 20 minutes ago, Skilltech said: [...] causing those pens to load incorrectly. Slow loading can happen, no matter where the images are hosted. So if you're going to create something with ScrollTrigger that has images involved (even if it is not directly related to those images) either set the dimensions of the image manually (via CSS) beforehand or add (a) load eventListener(s) to make sure the images are fully loaded when the JS executes, so ScrollTrigger will get the correct values when its setting things up, and you should be able to prevent something like that occuring. 1 Link to comment Share on other sites More sharing options...
Skilltech Posted January 10, 2022 Author Share Posted January 10, 2022 @akapowl can you give me an example of that event listener? I'd definitely want that as a precautionary measure. Link to comment Share on other sites More sharing options...
akapowl Posted January 10, 2022 Share Posted January 10, 2022 Here are some ressources on that https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event https://www.javascripttutorial.net/javascript-dom/javascript-onload See the Pen ExweBrz by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Skilltech Posted January 11, 2022 Author Share Posted January 11, 2022 @akapowl Oh, you meant those 😅 Thanks 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