iamterryclark

Hello, I am trying to create a horizontal scroller with drag interaction. the images are in all different shapes and sizes, I have two issues currently I'm not sure how to resolve. Note: The example is based on code I have in nextjs. The styling of the example is not exact to what I have in there, really they should be a percentage of the .image div. but was not able to get the exact styling. Still the issues below persist so hopefully its not to do with the css.... 1) Dragging to the end of the images goes outside of the range. How might I bound this properly? I have tried to use `bound: gallery` and scroller to no avail. 2) Resizing the window will screw around with the scroller and i am unable to get from beginning to the end of the full list of images. 3) Bonus - I would love to also get snapping involved on the images so that any images upon dragging will get centred on the screen. Would really appreciate some help with this. Many thanks in advance

Hey All, This is my first time plunging into GSAP and boy what a deep pool it is! I am trying to develop a horizontal scroller that uses drag and scroll interaction. After finding some code online, I hacked together some code to get 80% of the way there. Im building a next js app but have created the attached example in React as a close comparison. It's an image gallery where each image will be of a different size, so I need a way to dynamically calculate the width perhaps? My other issue is on resize i'm not sure quite how to get the container to smoothly resize instead of changing after a drag event? Sometime i also get into a gltichy state when scrolling / dragging to the end. Maybe i have missed something really simple, but i would love some advice on this. https://codesandbox.io/s/eager-chebyshev-9lbjrh?file=/src/App.js Much Appreciated! Terry