throwProps DOM manipulation based on the rotation value

[j4ck]

Hello!

 

Based on the rotation property of the wheel, I'd like to change the HTML content based on the segment that it lands on. I've used the rotationSnap var but I'm unsure how to call it's value based on the end position to then alter the HTML.

 

I'd also ideally like to set-up each segment as a separate div so I can then easily place content into them such as the title of the colour etc.

 

I'm fairly new to GSAP (and js to some extent) so I would like a bit of guidance on how achieve this.

 

Many thanks!

[Jonathan]

Hello @j4ck and Welcome to the GreenSock forum!

 

I'm a little confused on what your asking. Could you please more specific in what HTML content you want to replace. Like what is the CSS selector of the element, etc..

 

Any additional info will be greatly appreciated!

[j4ck]

Hey @Jonathan thanks for the welcome!

 

So to be more specific, the HTML that I would want to replace depending on the wheels endValue is everything in the ID of content (in the attached CodePen). When the user spins the wheel and it lands on another colour, the content in the h1, p and the href of the a tag would change accordingly. 

 

I hope this is more clear!

[Carl]

This can get a little tricky and I'm sure there are many ways to do it.

My basic approach would be to store your data in an array. Use the wheel to generate an appropriate index based on its rotation when it stops spinning.

Since you have 6 segments in your wheel I created an array with six items.

The wheel can be spun in a positive direction and land on increments of 60 thanks to your snap function.

When the wheel is done spinning I take the actual rotation which could be a big number and mod 360 it to get a value between 0 and 360. I then take that number and divide it by 6 to get the index that I need.

 

please see the demo here:

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

 

 

If you allow the wheel to spin in the other direction and generate values less than 0, my equations blow up. If you need bi-directional limitless spinning you may need to seek help from someone else. Hopefully my demo gives you some ideas.

 

As far as building the wheel out of separate divs and all the css for that, that's a challenge I'll have to pass on as well. Search CodePen for pie charts. I found this pretty quickly:

 

See the Pen fEish by AtomicNoggin (@AtomicNoggin) on CodePen

 

I suspect using a single SVG for the wheel will save a lot of trouble.

 

 

 

 

 

 

 

[j4ck]

Many thanks for your reply @Carl , this have given me an amazing base to work upon!

 

Ideally I would like to have it spin both ways and generate negative values but if it's not possible that it's something I can work around.

 

Like how you have changed the h1 using: 

$("#person").text(people[index]);

 

Could I also do this with the anchor tag? I tried putting all links into an array like you did for the h1 using the same markup but unfortunately it didn't work.

 

Cheers!

[j4ck]

I did it!

 

document.getElementById('button').innerHTML="<a href='"+Links[index]+"'>"+Text[index]+"</a>";

 

I'd still like to solve the issue of it only initially spinning one way. @Carl @Jonathan Any further thoughts?

 

Many thanks, 

[Carl]

yeah, after sleeping it was pretty easy to go the other way. when there is a negative index you just need to subtract from the length of the array.

 

if (index < 0) {
  //negative index needs to wrap around
  index = (people.length) + index;
}

 

 

I updated the demo with some names on the wheel so it is much easier to tell if it is working:

 

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

 

 

 

[j4ck]

Amazing @Carl, that's awesome. There's still a minor issue however how you're only able to go 'backwards' one rotation before it locks again. Any thoughts?

 

Many thanks for everyones input thus far! 

[Carl]

weird I just spun to -5100deg to +1440 and then back and forth a bunch and it always showed the right value. No locking up.

What OS / Browser are you using?

Any one else have any problems?