mkahraman Posted March 26, 2021 Share Posted March 26, 2021 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 Link to comment Share on other sites More sharing options...
mkahraman Posted March 26, 2021 Author Share Posted March 26, 2021 could anyone help me to optimize this use case? I will appreciate it Link to comment Share on other sites More sharing options...
GreenSock Posted March 26, 2021 Share Posted March 26, 2021 I'm not a React guy, so I'm probably not the best one to offer advice but... 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. 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 comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 26, 2021 Share Posted March 26, 2021 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. 3 Link to comment Share on other sites More sharing options...
mkahraman Posted March 29, 2021 Author Share Posted March 29, 2021 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... 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. 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now