aGeekonaBike

Actually the CodePen sample is a simplified non-responsive grid layout I am using as a starting point implementing gsap. The carousel design has optional horizontal, arced and round carousel layouts. I prefer using CSS Grid as opposed to Flexbox in that I get true 2D layout control. I can easily reconfigure the grid layout using media queries without major js code. The reason for the "circular" name is the desired animation of the horizontal layout's first and last slides as they "switch" sides. The "switching" slide will follow an bezier path below the carousel. In either layout, I will still need to set the correct target element's position to align / snap the dropped element. Here is an XD wireframe of the proposed design\animation. View Interactive XD Carousel Wireframe

I'm working on a circular carousel based on an Adobe XD wireframe. The carousel "slides" are arranged using an auto-generated CSS Grid template. Each grid-item is assigned a slide position classon page load. The navigation using the buttons work correctly. the fun begins when I implement drag functionality to the top three slides. The dropped slide is positioned incorrectly and the incorrect positioning continues through it's placement throughout the carousel. I attempted to retrieve the "Preview Slide" offset ( $(<grid-item>).position() in Draggable.onPressInit(...) and apply the new position in Draggable.onDragend(...) before updating the slide's class. Example: <main> <grid-container> <grid-item id="slide0" class="slide">Slide 1</grid-item> <grid-item id="slide1" class="slide">Slide 2</grid-item> <!-- Additional grid-items --> </grid-container> </main> Draggable.create({ type:'x' ,overshootTolerance: 0 , minimumMovement: 10 ,onPressInit: function(e) { previewPosition=$(previewSlide).position(); lastPosX= this.x; lastPosY= this.y; } ,onDragEnd:function(e) { if (this.hitTest(previewSlide, overlapThreshold)) { tl.to(this.target,1,{x:previewPosition.left}); moveNext(0); }else{ //return to original position tl.to(this.target,1,{x:lastPosX,y:lastPosY}); } } }); Is my logic just off, or, am I missing something in the using GSAP and getting the correct grid-item's position? CodePen: https://codepen.io/aGeekonaBike/pen/eYOVOaM