andrewCodes

I think the image with the car on the road is probably the easiest to look at as the car acts as a nice point of reference. Scroll up and the car moves downwards in the viewport, scroll down and it moves up. To illustrate it more clearly I've added a dividing line across the viewport and set the opacity of all other image containers to 0 to remove any distractions. https://codepen.io/andrewCodepens/pen/abrVWRe

That's what I assumed would be the case – direction would be based on where the overflowing part of the image is. However, as shown in your demo that is not what actually happens when using auto as yourspeed value. All the images in the demo have bottom: 0 applied yet are not all going in the same direction. If that alignment was what defined the direction of the parallax when using auto all of those should go in the same direction but they don't. Outside of the codepen demo, this inconsistent result can be seen at around 7:50 in opening video on the ScrollSmoother page of the gsap docs – the image that enters the viewport after the full width image of the trees is going in the opposite direction. Further evidence of auto not behaving as expected is that in the gsap codepen demo I linked to in my opening post, if you change the speed value on line 9 of the JavaScript tab from auto to, for example, .5 all the images parallax in the same direction with no changes made anywhere else. These three pieces of evidence seem to show that the alignment of the images does not dictate the direction of the parallax when using auto as the value for speed.

Hi. I've been working with ScrollSmoother, using data-speed="auto" on images. I noticed some images were going with the natural scroll of the site whereas others were going against it (i.e. as I scroll down, the images appear to move up and vice versa). I couldn't work out what was going on and assumed I must have done something wrong somewhere. In an attempt to remove as much code as possible, I grabbed the example codepen (as linked here) and noticed it does exactly the same thing. The first image and the final two images go the "wrong" direction (i.e. against the scroll) whilst the others go with the scroll. The three that go the "wrong" direction are larger and this seems to be the cause. It is the height in relation to the viewport that seems to cause the issue rather than the actual height of the image. For example if an image has a height of 500px and is on a viewport with a height of 550px, the parallax will be in the wrong direction but if I extend the window so the viewport is, say, 1000px then the parallax with be the right direction. Having a page with parallax going in opposite directions seems odd. As does the direction of the parallax of a specific image being decided based on the height of the viewport. I can get around this by using a number rather than auto as the data-speed value but this seems to rather defeat the purpose of auto. I have to say I don't quite understand the technicalities of why this is what happens when using auto. Is this by design or is it a bug? It seems that if I want to ensure parallax images always go with the direction of scroll I cannot use the auto feature. Is that correct?