draggable grid with batch animation

[gregor]

Hi,

 

I wonder how I could animate elements of a grid that can be dragged in x,y direction.

$Draggable.create(el_carsGrid.value, {
  bounds: el_carsGridWrapper.value,
  onDrag: function (e) {
    // calculations by my own?
  },
});

Should I use the onDragFunction and then check for each element if it is in the viewport or is there already a gsap solution and I didn't find it in the docs?

ScrollTrigger.batch will not work, because there is no scrollevent...

 

 

[Rodrigo]

Hi,

 

Is really hard to know what you're trying to do without a minimal demo.

 

I don't know any limitation that wouldn't allow you to drag elements of a grid, maybe the only suggestion would be to not drag the direct child of the grid parent container, just as a precaution if you end up reparenting the elements, if not that shouldn't be an issue at all.

 

Maybe this demo can demonstrate the capacities the Draggable Plugin has:

See the Pen Pqwxvw by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[gregor]

Hi, 

 

Ah no, I think I didn't explain it well.
the whole grid can be dragged and the grid items should be animated when they are visible in the viewport.

 

this is the markup.

<div 
  ref="el_carsGridWrapper" 
  class="bg-white h-screen relative overflow-hidden"
>
  <div
    ref="el_carsGrid"
    class="relative grid grid-cols-4 w-[800px] origin-top-left"
  >
    <div
      @click="navigateTo($event)"
      v-for="i in 50"
      class="aspect-square border-r border-b border-white-dirty p-2"
    >
      <img
        class="el_car w-full h-full object-contain"
        :src="carsURL()"
      />
    </div>
  </div>
</div>

I will later provide a codepen demo if this is not clear enough.

 

[gregor]

ok here is the demo

See the Pen XWQqYBr by destroy90210 (@destroy90210) on CodePen

 

[Rodrigo]

7 hours ago, gregor said:

the whole grid can be dragged and the grid items should be animated when they are visible in the viewport.

Ahh yeah I see what you mean now. That can definitely be done but requires a bit of custom logic in order to get those elements. That is beyond the scope of what we do in these free forums, unfortunately we don't have the time resources to provide free general constulting and create complex custom solutions for our users. We offer paid consulting services and you can post in the Jobs & Freelance forums to get help there as well.

 

My first approach would be to loop through the elements and create a lookup table/object that stores the position of each element either using getBoundingClientRect or the offset positions (based on the positioned parent element) and based on the x and y values reported by Draggable you can check which elements are in the visible section of the container:

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft

 

Happy Tweening!

[gregor]

yeah for sure I just wanted to know if there is already a out of the box "gsap solution", because there are so many plugins and helper functions that it is easy to overlook something
thanks for your reply