Animate the svgOrigin with an forward and backward state on each click move the origin point each time.

[Charlene]

Hello again,
I'm trying to make this little animation onClick where you also need to animate svgOrigin to get the desired effect.
But the transform origin point is unexpected.
On first click, the magnifying glass should convert to a cross, and on second click reverse to it's initial state, and so one.

Thanks for any help as always! 

See the Pen vYbgQRB by charlene-bx (@charlene-bx) on CodePen

[GreenSock]

I noticed several problems: 

1. You're altering the raw attribute values for the <line> elements which fundamentally changes their bounding box and consequently their transform origin calculations. I think it'd be much cleaner to either animate the attributes or the transforms, not both. You could even translate them to <path> elements and use morphSVG (well, if you're a Club GSAP member).
2. You're setting duration and overwrite on a timeline object, but that's not a thing. Did you mean to set {defaults: { duration: .6, overwrite: "auto"}}
3. You created conflicting tweens (wastefully). One tween in the timeline animates ALL the hand rotations, and then you also have another tween for each one of the hands animating them to a different rotation. Same goes for opacity. 
4. svgOrigin is not something you animate. It's almost NEVER what people want to do, like if they set .to(".hand", {rotation: 360, svgOrigin: "100 100"}) they just want it to rotate around that spot (so set the svgOrigin immediately) rather than slowly over time moving svgOrigin to that spot. If you really need to animate that (and again, almost nobody ever actually needs to do that), you could use a proxy object and apply it in an onUpdate. 
5. You had 3 values in the svgOrigin, like "100 100 90" but that's not valid. SVGs can only be 2D (so 2 values, not 3). 

I'd probably approach it more like this: 

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

 

I hope that helps. 

[Charlene]

Many thanks for this detailed explanation!
I do understand better where the problems are and this demo will be very useful!
And indeed, maybe I should try morphSVG to reproach myself with the desired animation although the demo would do just as well!

Thanks you as always!

[GreenSock]

Just to be clear, the morphSVG solution probably wouldn't deliver quite the look you wanted because you're rotating things on the way to their destination. There are settings in morphSVG that'll affect it more in that way, but I just didn't want to give you the impression that it'd be a drop-in replacement. It'd likely look different. Morphing is usually just interpolating the anchors and control points. That's why I put in the extra effort to code a solution for you in your particular use case. 

 

Cheers!