Jump to content
Search Community

mkahraman

Members

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Posts posted by mkahraman

    multiple Draggable instances performance

    in GSAP

    Posted

    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

    rotation svgOrigin second round not trigger

    in GSAP

    Posted 

    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?

     

     

    jest mock gsap

    in GSAP

    Posted

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

     

    • Like 1

    SVG element transform; unexpected results

    in GSAP

    Posted

    #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
                    }
                });
×
×
  • Create New...