Share Posted April 15, 2021 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 More sharing options...
Share Posted April 15, 2021 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted April 15, 2021 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 More sharing options...
Share Posted April 15, 2021 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. 1 Link to comment Share on other sites More sharing options...
Share Posted April 15, 2021 Hey @scavaliere, Like this example ??? See the Pen JjEZrbq?editors=1010 by mikeK (@mikeK) on CodePen Happy twening ... Mikel 1 Link to comment Share on other sites More sharing options...
Author Share Posted April 15, 2021 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! Link to comment Share on other sites More sharing options...
Share Posted April 15, 2021 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 More sharing options...
Author Share Posted April 15, 2021 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 More sharing options...
Share Posted April 15, 2021 Hey @scavaliere, Just do it - make a fork ... Link to comment Share on other sites More sharing options...
Share Posted April 15, 2021 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 More sharing options...
Author Share Posted April 15, 2021 Thank you @mikel and @Shrug ¯\_(ツ)_/¯ ! I'll give it a try and I will post here back my solution! Link to comment Share on other sites More sharing options...
Share Posted April 16, 2021 Hey @scavaliere, And here the drag ... See the Pen WNRyaRE?editors=1000 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
Share Posted April 16, 2021 Nice, @mikel! Looks like you forgot to include InertiaPlugin, though Here's the CodePen-only URL: https://assets.codepen.io/16327/InertiaPlugin.min.js 1 Link to comment Share on other sites More sharing options...
Share Posted April 16, 2021 Thanks - but now ... Link to comment Share on other sites More sharing options...
Author Share Posted April 23, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now