mkahraman Posted August 17, 2020 Share Posted August 17, 2020 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? Link to comment Share on other sites More sharing options...
GreenSock Posted August 17, 2020 Share Posted August 17, 2020 Do you have a minimal demo? That would REALLY help us understand what you mean. And keep in mind that smoothOrigin is true by default for SVG elements. Perhaps you're looking for smoothOrigin: false? 1 Link to comment Share on other sites More sharing options...
mkahraman Posted August 17, 2020 Author Share Posted August 17, 2020 Hi Jack, I added a minimal example; https://codesandbox.io/s/gsap-multi-rotation-6kiqc?file=/src/App.js Thanks in advance Link to comment Share on other sites More sharing options...
mkahraman Posted August 17, 2020 Author Share Posted August 17, 2020 this is an example with chained timeline https://codesandbox.io/s/gallant-germain-hjk3d?file=/src/App.js Link to comment Share on other sites More sharing options...
GreenSock Posted August 17, 2020 Share Posted August 17, 2020 I may be missing something, but from what I can tell it's behaving exactly as it should - the problem is that you're not actually changing the rotation on the 2nd one. In other words, let's say you rotate to 270 degrees on the first one, then you move again, and then you tell it to rotate to 270 degrees again but it's ALREADY at 270 degrees so it just looks like it's not animating because it's already there. See what I mean? If you're trying to define a relative value, you can just add a "+=" prefix. Also, it looks to me like your svgOrigin value is wrong in the 2nd one. You're moving 64 pixels to the right, but you're setting the origin to a totally different value rather than just adding 64 to the "x" part of the previous one. I assume you meant something like this?: let tl = gsap.timeline(); tl.to("#sector", { x: 64, y: 0, opacity: 1 }) .to("#sector", { delay: 1, rotation: rotate * (targetSectorNumber + 1), svgOrigin: "96 32", opacity: 0.5 }) .to("#sector", { delay: 1, x: 128, y: 0, opacity: 1 }) .to("#sector", { delay: 1, rotation: "+=" + rotate * (targetSectorNumber + 1), svgOrigin: "160 32", opacity: 0.5 }); 4 Link to comment Share on other sites More sharing options...
mkahraman Posted August 18, 2020 Author Share Posted August 18, 2020 this is great! thanks for heads up about "+=" it works as expected Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now