How to create half circle scrolling effect.

[Sameer Kryoverse]

Hi everyone,

I've been working on cloning suno.ai for learning purposes, and I'm facing two challenges. Firstly, I've successfully implemented a play song on scroll functionality using scroll trigger, but I'm struggling to figure out how to rotate these elements in a half circle as seen on suno.ai.

You can check my live site here.

If anyone has insights or guidance on achieving both the play song on scroll and the rotating elements in a half circle effect, I would greatly appreciate your help!

Thank you.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

You may be able to just set up all the text elements on top of each other, set their transformOrigin really far to the left, like "-800px center" and then make each them have a slightly different rotation value. Then on scroll, animate the rotation of all of those elements by the same relative amount. It's beyond the scope of help we can provide in these forums, but hopefully that'll get you going in the right direction. 

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Rodrigo]

Hi,

 

I strongly recommend you to read this:

https://3dtransforms.desandro.com/carousel

 

You can see that this demo is using that logic to setup the elements:

See the Pen eYxOXPP by GreenSock (@GreenSock) on CodePen

 

Finally you can check this post by @mvaneijgen one of our super heroes to learn about masking:

 

Hopefully this helps.

Happy Tweening!