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!

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,

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!

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!

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!