draggable Drag positioning Issue Using Auto-generated CSS Grid

[aGeekonaBike]

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: 

See the Pen eYOVOaM by aGeekonaBike (@aGeekonaBike) on CodePen

[ZachSaucier]

Hello and welcome to the GreenSock forums.

 

In general, it is a good idea to not create carousels yourself because you will run into all sorts of issues that you can't even think up at this point. Using someone else's is almost always a better option  

 

Second, if you are creating a carousel, it's generally a good idea to not manipulate the actual carousel images/slides themselves but rather primarily manipulate a track that all of them are placed on. That way instead of animating every slide in your carousel, you just animate the track (container) element that they are on.

 

If you really do have to use this design and create a new carousel, I would suggest that you change your approach to use a track as suggested in the paragraph above. How I could picture it working in this case:

• Place an invisible spinner (similar to the "Spin" example on our ThrowPropsPlugin page) over the top of the elements (but probably beneath the left/right buttons). 
• As that spinner is dragged and spun, update the classes programmatically based on the rotation angle and the initial state. 

However, I still foresee this project being more of a pain that it is worth, especially given the design is not responsive. My top advice is to encourage you guys to come up with a different, more easily implemented and responsive, design.

 

Happy tweening!

[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

[ZachSaucier]

7 minutes ago, aGeekonaBike said:

Here is an XD wireframe of the proposed design\animation.  View Interactive XD Carousel Wireframe

I see. I absolutely would NOT use an actual grid for this sort of animation as grid elements are much harder to animate than elements positioned in other ways.

 

There are also a lot of existing implementations of carousels that do this sort of thing for example: