Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mvsimple

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

Go to solution Solved by akapowl,

Recommended Posts

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

Link to post
Share on other sites

 

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

 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

Hi Paul,

 

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

Link to post
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.

×