Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Rotating dial for alaphabet navigation

Recommended Posts

Hi there, please accept my apologies for any poor terminology as i'm fairly new to GSAP - i'm looking for a way to build the attached image wheel naviagation. Essentially the dial will be able to rotate and select the letters in the wheel, when the user hits the select button there letter will be added to a seperate div/element. I'm struggling assosiating the rotating dial to the letters. I'm wondering if anyone can help assist with this even a super basic example would be amazing - thanks in advance.




See the Pen ExQwmrR by fuzzyRhys (@fuzzyRhys) on CodePen

Link to comment
Share on other sites



This looks nice and simple actually. There's 26 letters in the alphabet, and they're spaced out over 260 degrees of the circle. That's maths I can handle 😂


You can specify a start and end point, then just snap every 10 degrees and log out the end rotation value

See the Pen vYdeZog?editors=0111 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites

Hey Cassie, this is perfect thank you so much for taking the time to have a look 🙏


Appreciate you and all at Greensock!

  • Like 2
Link to comment
Share on other sites

No worries at all - this looks fun, pop back when it's finished, we'd love to see it ☺️

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.