svg SVG element transform; unexpected results

[mkahraman 4 Likes (Newbie)]

#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

                }

            });

[mkahraman 4 Likes (Newbie)]

updating gsap from 2.1.3 to latest version resolved the issue