mkahraman

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

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

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

this is great! thanks for heads up about "+=" it works as expected

this is an example with chained timeline https://codesandbox.io/s/gallant-germain-hjk3d?file=/src/App.js

Hi Jack, I added a minimal example; https://codesandbox.io/s/gsap-multi-rotation-6kiqc?file=/src/App.js Thanks in advance

myFunction () { tl.to(target, { x: targetSectorX, y: targetSectorY, opacity: 1 }).to(target, { rotation: rotation, svgOrigin: `${droppableCircleinRect.cx} ${droppableCircleinRect.cy}`, opacity: 0.3 }); } this is the myFunction I applied each iteration original SVG g <g class="sectorPaths" data-svg-origin="350 240" style="transform-origin: 0px 0px; z-index: 1208; opacity: 0.3; stroke: rgb(76, 93, 101); touch-action: none; cursor: pointer; user-select: none;" transform="matrix(1,0,0,1,0,0)" data-svg-x="614" data-svg-y="64"> after first myFunction() <g class="sectorPaths" data-svg-origin="350 240" style="transform-origin: 0px 0px; z-index: 1208; opacity: 0.3; stroke: rgb(76, 93, 101); touch-action: none; cursor: pointer; user-select: none;" transform="matrix(0,1,-1,0,854,-286)" data-svg-x="614" data-svg-y="64"> last myFunction() <g class="sectorPaths" data-svg-origin="350 240" style="transform-origin: 0px 0px; z-index: 1210; opacity: 0.3; stroke: rgb(76, 93, 101); touch-action: none; cursor: pointer; user-select: none;" transform="matrix(0,1,-1,0,854,-190)" data-svg-x="614" data-svg-y="160"> so first myFunction() does what I want, but second time invoking myFunction() skips svgOrigin rotation part. looks like we can't apply chain of svgOrigin-rotation, is that true? is there any way I can get around this?

I am trying to mock gsap on react.js, CRA. (gsap 3.2.6) Not sure why this is not working __mocks__ ----gsap.js ----Draggable.js import {gsap} from 'gsap'; import {Draggable} from 'gsap/Draggable'; gsap.registerPlugin(Draggable); //__mocks__/gsap/gsap.js module.exports = () => { return function() { return { gsap: class { static to(selector, options) { return jest.fn(); } static set(selector, options) { return jest.fn(); } static registerPlugin(plugin) { return jest.fn(); } }, TweenLite: { set: function() {}, to: function() {} } }; }; }; //__mocks__/Draggable.js module.exports = () => { return function() { return { Draggable: { create: function() { return 123; }, onDragEnd: function() { return jest.fn(); } } }; }; };

updating gsap from 2.1.3 to latest version resolved the issue

#updating gsap from 2.1.3 to latest version resolved the issue When I try to move an <g> element to desired position, it works as expected within react storybook component. However, when export to an app, it adds css transform which is not what I wanted. TweenLite.set(target, { css: { x: 264, y: 12, opacity: 1 } }); react storybook element; correct behavior <g class="abc" id="abcd" data-svg-origin="315 305" transform="matrix(1,0,0,1,264,12)" style="z-index: 1000; opacity: 1; cursor: pointer; touch-action: none; user-select: none;"> <foreignObject width="1" height="1" x="362" y="331"> <div id="selectableItem-0"> <div style="height: 1px; width: 1px;"></div> </div> </foreignObject> <path cursor="grabbing" stroke="#4C5D65" stroke-width="1" d=" M 350, 340 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0" fill="#00B6F1"></path> </g> exported component in an App; incorrect behavior <g class="abc" id="abcd" data-svg-origin="315 305" transform="matrix(1,0,0,1,264,12)" style="z-index: 1001; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 284.979, 7.31769, 0, 1); opacity: 1; cursor: pointer; touch-action: none; user-select: none;"> <foreignObject width="1" height="1" x="362" y="331"> <div id="selectableItem-0"> <div style="height: 1px; width: 1px;"></div> </div> </foreignObject> <path cursor="grabbing" stroke="#4C5D65" stroke-width="1" d=" M 350, 340 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0" fill="#00B6F1"></path> </g> the difference is inside style attr transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 284.979, 7.31769, 0, 1) no idea, what causes this. will appreciate if you can give me some hints these do not help either TweenLite.to(target, 0,{ x: 264, y: 12, opacity: 1 }); TweenLite.set(target, { css: { transform: `matrix(1, 0, 0, 1, ${moveToX}, ${moveToY})`, opacity: 1 } });