jkoler

I see! One SVG and morphing each path via a class? I've not had a chance to play with MorphSVG yet. I guess my reasoning was separating them was for ease of manipulation per segment, but that comes at a cost of a lot of precise absolute positioning as you've seen in the pen. I may need to shift my thinking! In any case I'll post the end result here and you can have a look. Thanks again, really helped me see what I need to do more clearly. Sometimes you need a second set of eyes. Cheers

First up: thanks so much for the help! Second: I'm actually using the current GSAP version locally. I added jQuery into codepen for the click event but inadvertently added '/jquery.gsap.min.js' thinking it was another required library from another demo pen I'd looked at. As for GSAP, again I just copy/pasted the source js files from another pen. The reason I've created it using separate SVGs is because (bear in mind the codepen is a much simplifed version as requested by a number of threads I read) per click each SVG will morph into a slightly different shape once rotated to 0. Hard to explain, but if you're interested I'll post the final product! Finally: Thanks so much for your help - now that I've seen what you've done it makes complete sense. Sorry for bothering you with the purely logical question that my small brain couldn't get around (?)

Hi All, I hope I'm able to articulate what I want to achieve! I have a simplified version of a chart in the attached Codepen. Whenever a 'slice' is clicked, I want it to spin anticlockwise to the 0 degree position. If it's already in the 0 degree position, nothing should happen. What I have so far is a CSS animation that rotates minus 72 degrees on every click which is the right animation, but I can't get the right rotation from any slice. Basically, on load, if you clicked the yellow segment it would go nowhere. If you click the pink segment, it rotates to 0 (correct). But if you then clicked the yellow segment again, it should rotate a whole 288 degrees back to the origin. I hope that makes sense and I haven't overcomplicated it!