Jump to content
GreenSock

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

rotation svgOrigin second round not trigger

Recommended Posts

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 post
Share on other sites

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? 

  • Like 1
Link to post
Share on other sites

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

 

  • Like 4
Link to post
Share on other sites

this is great! thanks for heads up about "+="

it works as expected

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×