Gsap Animated Horizontal Scroll - Sizing and auto scroll issue

[Hadeel]

Hi Everyone,

 

I am creating a horizontal scroll section in my website using Gsap. The section consists of a video and two images. I have two problems: 
1. The video and the images are set to 100% width and object-fit: cover yet it doesn't fit fully in the screen you have to scroll to see the rest of it. I tried object-fit: contain but then I end up with white space on the left and the right. How can fix that?

2. When I scroll down just a little the section automatically scrolls to the next element. Is there a way to disable that?

See the Pen MWzmgLo by Hadeel-Gamal (@Hadeel-Gamal) on CodePen

[kanguyen-vn]

Hi! The first issue is caused by the fact that even though you only have 3 visual items (1 video and 2 images), you have the container width in the CSS set to 400%, so each item is actually occupying a width of 133.33%. To fix this, just change the container width to 300%. The second issue is caused by the snap value in your tween. Just get rid of that line and you should be good. I hope this helps!

 

See the Pen QWJvbEW by Kiet-Nguyen-the-bashful (@Kiet-Nguyen-the-bashful) on CodePen

[SteveS]

1. Set the width of the elements to 100vw instead of relying on static container size. The container is already a flexbox so it will take on the width of its children. Setting the panels to 100vw tells the CSS exactly what you want instead of relying on the style cascade to get it right.

2. If you want to still retain the snapping but don't want it to be so sensitive, you can write a custom snapping function:
 

snap: (val) =>  {
      return gsap.utils.snap(1/(sections.length - 1), val)
    },

Roughly, this takes the natural end scroll as val, and feeds it into the GSAP snap utility function. As it is, if you scroll over halfway to the next slide, it will animate over, otherwise, it will return to its original position.

[Hadeel]

Amazing! Thanks everyone.