Parallax image with dataset

[Umberto]

Hi, I wanted to create a parallax effect with images, using data attributes. But as you can see from the example, when you scroll the image doesn't stay fixed in its container.

Is it possible to get help?
Thank you

See the Pen PodjBKW by umberto (@umberto) on CodePen

[GreenSock]

I'm having a hard time understanding exactly what your goal is (what the effect is supposed to look like), but if you are simply trying to make the image look like it's position: fixed inside its container, perhaps you should look at the CSS property background-attachment: 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

 

Otherwise, if you still need help please make sure you are very clear about the effect you want (maybe provide a sample URL). We don't really do build-to-order things here in the forums, but we're happy to answer any GSAP-specific questions you may have. 

[Umberto]

I apologize for my bad English.
Exactly, the image doesn't flow 100% in its container with class overflow: hidden. This happens if I increase the data-speed (example a data-speed:"1", data-speed:"2" or data-speed:"-1", data-speed:"-2"). What I wanted to understand if it was a Gsap or Css setting error.

I have attached a photo to better understand the problem.

Thank you

 

 

[GreenSock]

Oh, yeah, that's more of a math thing with figuring out how bit the image is, how much of a gap there is inside the container, the start/end positions in the viewport, the distance it'll travel, etc. I spent a ton of time figuring that stuff out to build ScrollSmoother's data-speed="auto" feature. It wasn't trivial, that's for sure.  

 

You can't just set arbitrary speeds and expect it to work because if you only have 20px of overlap, for example, but you set a data-speed of 5...it'll shoot way past that 20px. See what I mean? 

 

Good luck!