[Circular menu]

Hey @Cassie

 

I've tried setting the z-index of the circleWrap higher and the buttons are clickable but that prevents the scroll from working.

 

I'm working with javascript mouse events to trigger the scroll on the #scroll div but haven't found the correct way to detect the scroll mouse to pass to.

 

See the Pen JjazeLW?editors=1111 by marioandrade (@marioandrade) on CodePen

 

I'm passing the clientY but after clicking and dragging the mouse, when I try it again it resets the position.

[Circular menu]

Just noticed an issue.

 

How can I make the items clickable using the example above?

[Circular menu]

I should have posted the question earlier.

 

From what I was able to find, every circle starts, by default, at the "3 o'clock" position and to change that we need to rotate the circle to the desired position.

Knowing this I was able to set the initial of the SVG by defining the rotate property and passing it a value.
Based to the code I shared above from Codepen the initial set of the SVG stayed like this:

 

var circleSVG = document.querySelector("#svg");

gsap.set('#circleWrap, #svg', {
  xPercent:-50, 
  yPercent:-50,
  rotate: -240
})

Hope this becomes helpful to someone .

[Circular menu]

Hey guys,

 

Great thread!

 

I'm developing a circular menu very similar to what you guys have been sharing but I'm only just getting started with gsap and time is of essence to deliver this menu.

I have managed to make some progress in adapting the existing example to what I need but I can't figure out how to place the first item on the left top position.

 

If you follow the codepen link, when the page loads you'll see Item 4 and Item 3 showing, it should be Item 1 and Item 2 showing. 

See the Pen JjazeLW by marioandrade (@marioandrade) on CodePen

 

How can I set the position of the items?

 

Thanks in advance.