Parallax Image Backgrounds with ScrollTrigger, Smooth Scrollbar JS and scrollerProxy()

[Skilltech]

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

[akapowl]

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

 

[Skilltech]

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

 

 

[akapowl]

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.

[Skilltech]

@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.

[akapowl]

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.

 

[Skilltech]

@akapowl can you give me an example of that event listener? I'd definitely want that as a precautionary measure.

[akapowl]

 

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

 

[Skilltech]

@akapowl Oh, you meant those 😅 Thanks