Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mkahraman

multiple Draggable instances performance

Recommended Posts

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

 

 

 

 

 

2021-03-26 12.44.03.gif

Link to post
Share on other sites

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

Link to post
Share on other sites

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);
        }
      });
    });

 

Link to post
Share on other sites
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.

 

 

 

  • Like 3
Link to post
Share on other sites
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

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×