Jump to content
GreenSock

Skilltech

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

Recommended Posts

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

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

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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

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.

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

@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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×