Jump to content

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


  • Content Count

  • Joined

  • Last visited

Everything posted by mkahraman

  1. 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
  2. could anyone help me to optimize this use case? I will appreciate it
  3. 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
  4. this is great! thanks for heads up about "+=" it works as expected
  5. this is an example with chained timeline https://codesandbox.io/s/gallant-germain-hjk3d?file=/src/App.js
  6. Hi Jack, I added a minimal example; https://codesandbox.io/s/gsap-multi-rotation-6kiqc?file=/src/App.js Thanks in advance
  7. 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 myFun
  8. mkahraman

    jest mock gsap

    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(); } }, Twee
  9. updating gsap from 2.1.3 to latest version resolved the issue
  10. #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="31