GSAP Snap in Horizontal Slider is little off for middle slide.

[mvsimple]

Howdy Seniors,

 

I've created an horizontal slider with vertical scroll as shown in this pen:

See the Pen XWmEoNg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Issue: Snapping is not clean, and the middle slide (.des2) is moving slightly to the right.

 

Please tell me what I am doing wrong in this code.

 

Thanks, and a wonderful plugin and even greater support.

See the Pen eYdYZqE by mvsimple (@mvsimple) on CodePen

[akapowl]

 

Hey @mvsimple - welcome to the forums.

 

The offset on the snapping you are experiencing seems to be related to the 

 

.to({}, { duration: 0.5 }); // an empty tween to generate a pause at the end;

 

at the end of your gallery-timeline.

 

Your options would be as following:

Either get rid of that empty tween, and use the snapping as you do.

Or try and consider that extra part you add, when calculating the snappoints.

 

 

In this special scenario with exactly  this many .design elements, the following seems to work, but I only got there by trial and error, and at this point, I can not tell you how to calculate it for when you have a different amount of .design elements.

 

snap: 1 / (sections.length - 1 + 0.25),

 

 

See the Pen 505d008d6014a7344df8ebd4bbd80a17 by akapowl (@akapowl) on CodePen

 

 

Cheers,

Paul

 

[mvsimple]

Hi Paul,

 

It's working great. Thanks for the tip. I'll keep that in mind.