MarioAndrade

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. https://codepen.io/marioandrade/pen/JjazeLW I'm passing the clientY but after clicking and dragging the mouse, when I try it again it resets the position.

Just noticed an issue. How can I make the items clickable using the example above?

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 .

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. https://codepen.io/marioandrade/pen/JjazeLW How can I set the position of the items? Thanks in advance.