make a shape get back to initial position after rotation

[EmGes]

Hello,

 

as you can see on the codepen, I'm trying to rotate + translate the black shape when the mouse is on the grey shapes. Each of them makes the black one rotate in a different angle. What I want to do is make the shape get back to its initial position on click. This work when the shape has rotated in one angle, but once it has rotated on two, it doesn't anymore. Any idea on how to fix this ?

 

Thanks !

See the Pen xzZeOG by EmGes (@EmGes) on CodePen

[GreenSock]

I'm a little fuzzy on exactly what you expect here (what does "fix" mean?). By default, smoothOrigin on SVG elements is true, so to accommodate for the shifting that's necessary, GSAP tracks it in an "xOffset" and "yOffset" value in the _gsTransform (purposely undocumented). This is a very unusual edge case where it seems like you're wanting smoothOrigin sometimes, and then you want to omit that other times. Hm. 

 

Here's one way you could just offset the x and y values based on the xOffset and yOffset: 

See the Pen a8357bcf99a4d4c0df88747a0f1c98a7 by GreenSock (@GreenSock) on CodePen

 

Is that what you wanted? 

[EmGes]

I'm sorry if I wasn't clear ! Actually here I isolated some elements from a larger animation where I'm trying to replicate the movements of an accordion. So thank you a lot, that's exactly what I wanted to do ! However now I need to make it work on several rectangles at a time, I tried this but it doesn't work :

See the Pen NzNBrr by EmGes (@EmGes) on CodePen

 

[GreenSock]

Oh, that's no problem. You just need to restructure your code a bit. This is a good use case for the "cycle" feature of the staggerTo() method because you can call a function for each target and return the appropriate value: 

See the Pen 959ad2c69d34d2d8b0f773eba3cda3a6 by GreenSock (@GreenSock) on CodePen

 

Just make sure that you use a relatively recent version of GSAP (the old one you were using didn't support this feature).

 

Does that help? 

[EmGes]

It works perfectly thank you !