Incremental but infinite rotation

[jkoler]

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!

See the Pen wvGBwpa by macphersonj (@macphersonj) on CodePen

[ZachSaucier]

Hey jkoler and welcome to the GreenSock forums.

 

First things first:

• Why are you using such a really old version of GSAP? GSAP 3 has a smaller file size, a sleeker API and a TON of new features so we highly recommend using it instead.
• The way you created the ring using separate SVGs is a little confusing to me. Why not create it as one SVG?
• You're loading two versions of jQuery. You don't even really need one but it's best to load just one if you're going to use it  

Normally we don't have the capacity to help with a purely logical question like this, but since it's fairly simple and you're new I'll help.

 

Here's how I'd do it if I had to use your markup (though in practice I'd probably make the above changes):

See the Pen rNeaapO?editors=0010 by GreenSock (@GreenSock) on CodePen

[jkoler]

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 (😝)

[ZachSaucier]

2 minutes ago, jkoler said:

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!

You can do that in one SVG  MorphSVG works with paths, not SVG elements. So having them all in the same SVG still makes sense.

 

Happy to help!

[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

[ZachSaucier]

3 minutes ago, jkoler said:

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!

I think positioning would be easier and manipulation is the same if you use one SVG  

 

4 minutes ago, jkoler said:

One SVG and morphing each path via a class?

Sure, it doesn't really matter what you use to select them. You could just select them using their tag name.