Jump to content
GreenSock

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

Transforming multiple grouped SVG elements about a fixed origin

Go to solution Solved by GreenSock,

Recommended Posts

Hi. I am starting to go mad trying to resolve this, so I thought I would post a question here instead.

 

I am try to implement a rotation such that everything on the page view box (the outermost group -- depicted by the purple outline) rotates about its pre-defined origin point (shown by the cross - located at 50% 50% of view port in this case, but could be anywhere).

 

At present the resultant rotation is relative to the compound contents of the Group (i.e. all the House elements) -- spinning around itself , whereas I need it to be relative to the parent view box -- effectively spinning around a fixed point on the page.

 

So... the outer Group element ('street' in my codepen example) needs to behave like a parent-filler rather than a child-wrapper, with the origin offsets relative to the parents offset and dimensions. 

 

Note: The content items can be arbitrary i.e. multiple houses, cars etc. (set by a user), and the content may also exceed the bounds of the purple view box. None of these factors should affect the pre-defined rotation origin of the 'street'.

 

house_rotate_00.png.749780c3d48cfa771b318cacfc72810a.png (start)

 

house_rotate_90.png.4c7ff545ca8a471cba53daa4e07256c2.png (desired @ 90 deg)

See the Pen jOroexa by SimplSam (@SimplSam) on CodePen

Link to comment
Share on other sites

  • SimplSam changed the title to Transforming multiple grouped SVG elements about a fixed origin
  • Solution

Welcome to the forums, @SimplSam!

 

It sounds like you're looking for svgOrigin: 

 

  • Like 3
Link to comment
Share on other sites

Ahhahhhhhhh. Excellent. That was amazingly quick & easy and testament to this Forum and the simplicity & power of GSAP.

I would also like to shout out to @SaraSoueidan. During my research I came across a set of excellent well-written articles on the subject of SVG & Transformations by Sara: https://www.sarasoueidan.com/blog/svg-transformations/

 

My working version:

See the Pen VwjOqBE by SimplSam (@SimplSam) on CodePen



p.s. I have been lurking for some time ... 

Link to comment
Share on other sites

Just now, SimplSam said:

Ahhahhhhhhh. Excellent. That was amazingly quick & easy and testament to this Forum and the simplicity & power of GSAP.

Yay, thanks for noticing. And thanks for being a Club GreenSock member! 🙌

 

1 minute ago, SimplSam said:

I would also like to shout out to @SaraSoueidan

Indeed, she is excellent. 

 

1 minute ago, SimplSam said:

p.s. I have been lurking for some time ... 

There are a lot of lurkers around here. Everyone is welcome. I think lurking for a while can be a wonderful way to learn. Congrats on stepping out of the shadows and posting your first question. Pretty soon you'll be answering other people's questions ;)

 

Happy tweening!

  • Like 4
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.
×