Jump to content
GreenSock

scavaliere

Rotation wheel with different items inside

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

I'm sure we can help, but I can't see your images. Seems like some sort of login is required? 🤷‍♂️

 

If you can fix that and post back, someone can get you on the right track.

 

Happy tweening.

:)

 

  • Like 1
Link to comment
Share on other sites

Hello @PointC,

thank you for the reply.
I've replaced the elements with colored divs. 

Hope you can help!

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

Hey @scavaliere,

 

This is an example which could be interesting.

 

See the Pen ZELOamM by mikeK (@mikeK) on CodePen

 

But what part should be draggable? 

 

Happy tweening ...

Mikel

Link to comment
Share on other sites

Hello @mikel! Thank you again. 
It's really near to what I need but the entire wheel should be draggable. 

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

 

Thanks - but now ...

Link to comment
Share on other sites

Hello! 
I finally found a solution :)
Thank you for all your suggestions !
I updated my final codepen on top!

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.
×