Pretty bad performance of Draggable.create

[Bruno Capdevila]

I am developing a game using

- react 18

- latest gsap

- styled components

 

At some point I create a bunch of draggables by doing

Draggable.create('.token-card-view', {
        type: 'x,y',
        bounds: '#action-menu-view',
        edgeResistance: 0.65,
        dragResistance: 0.1,
        activeCursor: 'grabbing',
        onDragStart: function () { ... },
        onDrag: function () { ... },
        onDragEnd: function () { ... },
      })
    );

There are right now exactly 7 elements with token-card-view class.

When profiling I have the following functions taking way too much time

 

I am unable right now to re-create a pen that extracts the piece of my application causing this.

Things I can think of 

- our styles do using cqmin
- out styles do using some calc
Still, it does not seem too heavy to cause this.

Any insight ? recommendation ?

 

 

 

[Bruno Capdevila]

The bounds property does trigger the recordStartPositions, if I deactivate it the performance is fine.

 

But it 

[GreenSock]

Are you just saying that the initial creation seems to take longer than you'd expect? Actual dragging is fine, right? There are definitely calculations that must be done initially to figure out exactly where the bounds must be so that during dragging it's nice and fast.