Need help rotating/flipping SVG Paths

[JohnnyD]

Hello!

I'm trying to create a nice flip or rotation effect for the individual tiles in this SVG (I have multiple similar SVGs on the same page, but just showing one in the demo for now though).

 

I currently have a rotation from 0 to 90deg, but would rather set it up to go from 90deg to 0, however when I tried adding "transform: rotate(90deg)" to the SVG path elements "style" tag, most of the image just disappeared (not totally sure why).  So, one question is how can I set the initial state so that the individual tiles are rotated 90deg?

 

Also, a co-worker suggested possibly using the Flip plugin, but haven't got that far yet.  Anyway, any thoughts/suggestions would be appreciated!

 

See the Pen LYamZRV by jduttera (@jduttera) on CodePen

[GreenSock]

It's always best to set transform-related stuff directly through GSAP to ensure maximum performance and cross-browser compatibility. So you could set the initial state like this: 

gsap.set(".tile-pattern path", {rotation: 90, transformOrigin: "50% 50%"});

You don't need to create a timeline if you're only populating it with one tween. It's totally fine to do that, but you could simplify it slightly by using a simple tween: 

See the Pen KKEBEPN?editors=1010 by GreenSock (@GreenSock) on CodePen

[JohnnyD]

Great!  Thank you so much.  And that clears up setting the initial state in GSAP too.  Thanks again!

[Cassie]

Also just to clarify - Flip plugin isn't for visually flipping stuff. That can just be done with normal transforms

It stands for First, Last, Invert, Play - It's a technique for complex layout animations where there are structural changes to the DOM (not necessary for just animating some rotation on SVG elements)

[JohnnyD]

Ah yes, good point...thanks for making that clear!