Unable to accurately scroll a scrollTrigger scroller by px value

[ThaoD5]

Hello everyone, and thanks for GSAP ! 
I'm building a slider that mixes quite a lot of GSAP features, i'm nearly there but there is one annoying thing that I am unable to comprehend. 
I am willing to add in a homemade "snap" feature (much easier to set in place) to have a precise snap on a value that I'd define myself; hereby hardcoded to 2000px.
When you do scroll into the slider and wait 500ms, the "snap" simulation takes place, but unfortunately the amount of pixels where it snaps does not reflect the 2000px ( instead, we have 1775px ) 

What is going on ? Why exactly wouldn't it work this way ? I've tried another approach which is to animate the X value of the track that is getting translated directly, but that does not work with other features like Draggable, since the "scroll" indicator isn't correctly changed (and changing it makes it scroll and go back to a 1775px value)

Any help is welcome, I've been scratching my head for a while now  

See the Pen jOJLYVx by hellothao (@hellothao) on CodePen

[Rodrigo]

Hi,

 

I'm not 100% sure that I follow exactly what you're trying to do here.

 

For what I can grasp I tried with either the ScrollTo Plugin:

https://gsap.com/docs/v3/Plugins/ScrollToPlugin

 

Or using ScrollTrigger's snap config and callbacks (scroll down to snap and expand with the see more button):

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object

 

Here is a demo using the snap configuration:

See the Pen gOExQeb by GreenSock (@GreenSock) on CodePen

 

Here is a demo using the ScrollTo Plugin:

See the Pen ExMvOLp by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[ThaoD5]

Hi @Rodrigo, and thanks for your answer! 
So, indeed, i've looked also at using snap / scrollToPlugin, but the problem isn't really "how" to scroll to, but how to do it to have precisely 2000px translateX on the #innerSlider element.
Because right now, it is impossible for me to accurately scroll to a certain element, since scrolling 2000px ends up with a final translateX value of 1757,... 

What I'm trying to achieve : scroll in the slider, after 500ms, automatically scrollTo the closest element so it's "centered".
Let me know if it still isn't clear! 

[mvaneijgen]

You want to snap to each item in the animation right? Maybe I'm missing something, but the snap feature seems the perfect fit for this. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

And check  out the snap object https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object you can define so much more in it. Hope it helps and happy tweening! 

 

See the Pen GReMKBX?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[ThaoD5]

Hello @mvaneijgen! 
I've tried this solution before, but unsuccessfully, but I did the other approach of having an array of steps ([0.1, 0.2, ...]) which didnt turn out well at all ! 
I've just tried yours and it works as a charm ! Thanks a lot for the input and your time;