multiple Draggable instances performance

[mkahraman]

I am running into performance issue when I have to deal with multiple draggable instances about 80 instances on mostly Win10 and ChromeBook. MacOS and ipad are ok. 

 

here is my CodeSanbox;  

 

https://codesandbox.io/s/gsap-rerendering2-cxus0?fontsize=14&hidenavigation=1&theme=dark

 

the other one with useRef

 

https://codesandbox.io/s/gsap-rerendering-3g4zk?fontsize=14&hidenavigation=1&theme=dark

 

 

 

 

 

[mkahraman]

could anyone help me to optimize this use case? I will appreciate it

[GreenSock]

I'm not a React guy, so I'm probably not the best one to offer advice but...

1. Do you get the same results if you do the same thing but WITHOUT React? In other words, if you create a Draggable for 50 elements on your Win10 device with just a plain <div> (no React whatesoever), are you seeing the same delay? This would help identify if it's a React issue. 
2. If the performance cost is largely at the very start to create the Draggable, instead of doing it for all of the items immediately you could just skip it until the user presses on the element. Sorta like: 

   gsap.utils.toArray(".draggable").forEach(el => {
     // you'd need to also listen for touchstart/mousedown for various devices...
     el.addEventListener("pointerdown", event => {
       if (!el.dragger) {
         el.dragger = Draggable.create(el, {
           type: "x,y",
           bounds: "svg"
         })[0];
         el.dragger.startDrag(event);
       }
     });
   });

 

[Shrug ¯\_(ツ)_/¯]

2 hours ago, GreenSock said:

Do you get the same results if you do the same thing but WITHOUT React?

 

@mkahraman , You can try this 500 count example by @GreenSock in the following thread. To help you determine if it's an issue with your Win10 & ChromeBook, SVG, React. I would be surprised if it's related to GSAP itself.

 

 

 

[mkahraman]

On 3/26/2021 at 4:44 PM, GreenSock said:

I'm not a React guy, so I'm probably not the best one to offer advice but...

1. Do you get the same results if you do the same thing but WITHOUT React? In other words, if you create a Draggable for 50 elements on your Win10 device with just a plain <div> (no React whatesoever), are you seeing the same delay? This would help identify if it's a React issue. 
2. If the performance cost is largely at the very start to create the Draggable, instead of doing it for all of the items immediately you could just skip it until the user presses on the element. Sorta like: 

   
   gsap.utils.toArray(".draggable").forEach(el => {
     // you'd need to also listen for touchstart/mousedown for various devices...
     el.addEventListener("pointerdown", event => {
       if (!el.dragger) {
         el.dragger = Draggable.create(el, {
           type: "x,y",
           bounds: "svg"
         })[0];
         el.dragger.startDrag(event);
       }
     });
   });

 

I am sure, it is React that does not like directly creating that much instance under their state machine. Just for this, I was thinking to migrate this use case of code into native WebComponents.

2. Your suggestion makes a lot sense. I tried it out on the test code above, it works well. I will implement this in my actual use case and see what happens

 

thank you @GreenSock