Jump to content
GreenSock

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

Remove svgOrigin transformOrigin transforms

Recommended Posts

What's the best way to remove transforms added to svg elements when using svgOrigin or transformOrigin? I've never had to deal with this before, and couldn't find any documentation on it.

 

When you press the Reset button in this demo, I want all the elements to go back to their original starting state, but I don't know how to remove the svgOrigin/transformOrigin transforms.

 

I have it working, but I don't like my current solution, overwrite the matrix. 

 

tl.to(viewport, 1, {
  attr: { transform: "matrix(1,0,0,1,0,0)" },
  smoothOrigin: false,
  svgOrigin: "0 0"
})

 

I'd much rather do something like this.

 

tl.to(viewport, 1, { x: 0, y: 0, rotation: 0, scale: 1 })

 

See the Pen oGoyYb by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Well, smoothOrigin is true by default for SVG elements, so if you want to kill that you've gotta smoothOrigin:false (as you did). Are you saying that it doesn't work properly if you swap in x:0, y:0, rotation:0, scale:0 for the transform overwrite? I poked around in your demo and couldn't see a difference, but I'm probably missing something. Are you saying it doesn't work? Got a reduced test case? ;) 

Link to comment
Share on other sites

This should be easier to understand. Press "move" and then "reset". It's obviously going to jump back, but I would like to translate it back.

 

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

 

Link to comment
Share on other sites

Thanks for the reduced version :)

 

Wouldn't your original idea of x:0, y:0, scale:1, rotation:0 do it? And then at the end of that, if you want to remove the svgOrigin and stuff, just use a set() in an onComplete?: 

See the Pen GMQQmZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

Link to comment
Share on other sites

33 minutes ago, GreenSock said:

Wouldn't your original idea of x:0, y:0, scale:1, rotation:0 do it? And then at the end of that, if you want to remove the svgOrigin and stuff, just use a set() in an onComplete?: 

 

No. The origin might have changed more than once, like in the demo. And the rotation moving back is still based on the current origin. I'd like it to rotate back around a new origin, like the object's center.

 

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

 

 

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.
×