Jump to content
Search Community

Rotation wheel with different items inside

scavaliere test
Moderator Tag

Recommended Posts

Hello, 
I would like to make a "flower-like" rotation animation for my website.
I would need multiple items inside. I'm using Gsap TweenMax, Draggable and Inertia plugin. 
I have added the items as list and applied the draggable rotation on the ul. However I would need to add item in different position and rotation, in the attached codepen there's an example but when I add elements all the list rotate (with items all together) while I need single items rotating.

Anyone can help? 

Thank you in advance!

See the Pen KKaeyZj by scavaliere (@scavaliere) on CodePen

Link to comment
Share on other sites

Howdy, @scavaliere. Are you saying that you want each element independently draggable? If so, just Draggable.create() for each one. 

 

If that's not what you want, could you please elaborate a bit? And it'd be cool if your demo showed the issue - currently there's no way to add anything so I don't see what you mean. We'd love to help, though.

  • Like 1
Link to comment
Share on other sites

9 minutes ago, GreenSock said:

Howdy, @scavaliere. Are you saying that you want each element independently draggable? If so, just Draggable.create() for each one. 

 

If that's not what you want, could you please elaborate a bit? And it'd be cool if your demo showed the issue - currently there's no way to add anything so I don't see what you mean. We'd love to help, though.

Hello ! 
Thank you guys for all your support! 
I will try to elaborate a bit: I need a rotating wheel where every single div has a different rotation following a circle path. 
I don't need to drag a single element like @mikel has presented (thank you, anyway :)) 
The final effect should be like the pic I've attached.

I've tried to achieve this with some css transform for every div but I was wondering if it's possible to do it via GSAP dynamically. 

Hope it's more clear! 

 

rotation.jpg

Link to comment
Share on other sites

Hi @scavaliere,

 

Based upon your “what I need” picture you should be able to utilize this example as a starting concept. You can take time to modify it to work vertically and also regarding whatever your own personal requirements are. In general it seems the concepts you require are present in that example.

 

I think that should really help you conceptually, good luck with your project.

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.
×
×
  • Create New...