Jump to content
GreenSock

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

How to move a SVG path and update the transform-origin value with the ticker event?

Recommended Posts

Hi, I'm getting more and more familiair with GSAP and JS, but I'm only diving in to it since last week. Now I was playing around with the TweenMax.ticker and mousemove event based on: 

 

 

But I got stuck on trying two things:

1)move SVG paths in the same way as the circle element; I did get the rect element to work by changing the cx and cy into x an y, but I don't know how to interpret this with a path position, since the ticker event does not seem to work if I give the SVG group tag an id.

2)I attached a codepen sketch based on the pen from Blake Bowen; as you can see I simply added a timeline to rotate one of the elements. Now I want this to keep on rotating around the origin value of the element, but this doesn't happen. The origin point stays on the begin value of the element (which is the top left corner) and does not move accordingly to the mouse position.

 

Initially I want to be able to do:

1)move SVG paths based on mouse position

2)know how to apply more than the change of position accordingly

 

Can anyone help me? Please let me know if my question is unclear. Thank you in advance!

 

 

 

 

See the Pen JrrmNK by dennisvg (@dennisvg) on CodePen

Link to comment
Share on other sites

Hi @dennisvg

 

Couple questions. Can you explain what the red ball should be doing? Rotating around the mouse point? If so, what should the radius/offset of the rotation be?

 

The way I'm moving the ball in that demo is pretty basic, just setting the cx and cy attribute. However, you can move stuff by translating it. This includes paths and groups. For performance, it's usually better to do translation.

TweenLite.set("#somePath", { x: 100, y: 100 });
TweenLite.to("#someGroup", 1, { x: 200, y: 200 });

 

Note that translation is different than the x and y attribute on some elements like a rect or image. You can tween attributes using the AttrPlugin (it's included with TweenMax, so you don't need to load it separately).

TweenLite.to("#someRect", 1, { 
  attr: { x: 100 }
});

 

If you were to tween the x attribute of a rect 100 and translate its x 100, the net change would be 200.

// This will move the rect 200
TweenLite.to("#someRect", 1, { 
  attr: { x: 100 },
  x: 100
});

 

I'll look at your demo here in a few. In the meantime, here's a post about the SVG getBBox method that might be worth checking out. It's very useful for positioning, but it has some quirks.

 

And this demo showing how mouse coordinates change when your SVG has a viewBox.

 

See the Pen 59a82524eab03d04c58c1de903f4fa0f by osublake (@osublake) on CodePen

 

 

 

  • Like 2
Link to comment
Share on other sites

@OSUblake Thank you for your quick reply! I'll look into all of your suggestions :-) They look very helpful.  

 

I'm glad you mentioned the difference between changing the x y attributes of some elements and translate; since I indeed figured the rect and circle were being translated by the mouse position. 

 

As for your questions: In this case I was trying to rotate the ball around it's bottom right corner (transform-origin: 100% 100%). Since the ball position follows the mouseposition; I hoped to see the ball continue to rotate around it's own corner. I changed the pen and applied the rotation on the blue stick, with its rotation point in the middle (transform-origin: 50% 50%) – maybe that gives a better impression. If you point your mouse in the left upper corner of the screen you can see what I intended; if you move the mouse down to the right you can see the rotation point is not changing.

 

I hope you can tell how I approach this wrong :-)  thanks again

Link to comment
Share on other sites

Translating your elements will fix the origin problem, and it would be better to move everything as a group. 

 

See the Pen wrPway?editors=0010 by osublake (@osublake) on CodePen

 

 

 

  • Like 3
Link to comment
Share on other sites

Thank you very much! I really appreciate the quick response and insight you gave me, that really helps a lot to understand it. 

  • Like 1
Link to comment
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.
×