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