Jump to content
Search Community

Trying to create wheel of divs which rotate on drag

jasbir test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys,

 

I'm trying to create the following. So far succeeded to create the divs at load but unable to rotate on mouse drag can you please help? Here's my file below

 

I just need to know how the rotation can be accomplished when you click and drag mouse in circular motion. All div items inside semi circle have class .items and I'm new to animation.

 

URL my following to build is below

 

http://fff.cmiscm.com/#!/main

rotatelDivs.html

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. I took a brief look at it. Just so you know, its always best to use CodePen, plunkr, jsfiddle or another online html editor that allows us to view, test, and edit in a live environment. Makes it very easy for us to provide working solutions. Here's a little info on using CodePen:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

 

To rotate an element when you drag is really easy with Draggable. Just one line of code:

 

Draggable.create("#knob", {type: "rotation"});

 

The demo below uses a few more features: like momentum based throwing with ThrowProps plugin and some code to log out the current rotation.

 

 

See the Pen ywpet?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

Check out the full Draggable API Docs

 

Draggable is CDN-hosted and available when you download the GSAP zip from our site.

You can load Draggable from here: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>

 

 

If you need to flick and throw your object you can grab ThrowPropsPlugin with a Club GreenSock membership

 

J

 

  • Like 1
Link to comment
Share on other sites

Hi Carl, I have looked at these but these only rotate outer div which is not good for me? Please look at the stackoverflow post i posted that has my html snippet code running.

 

https://stackoverflow.com/questions/45696418/trying-to-create-wheel-of-divs-which-rotate-on-drag

 

I want to make the div s with CSS Class "items" draggable and change their x,y and z-index accordingly as the link i mentioned earlier. I tried few things from the link

 

https://greensock.com/docs/Utilities/Draggable

 

But no luck. Till loading is fine, once loaded on click and drag on mouse the divs should rotate 

Link to comment
Share on other sites

What does this do?

function af(aE, aB, aD) {
    aB = aB % 360;
    if (aB < 0) {
        aB = aB + 360
    }
    aE.pos = aB;
    if (aB > 190 && aB < 350) {
        if (aE.use == 0 || aE.item == null) {
            aE.use = 1;
            var aC;
            if (aD < 18) {
                aC = o(aD + a, ao)
            } else {
                aC = o(aD - c + a, ao)
            }
            aE.cur = aC;
            aE.item = au(aD, aC)
        }
        if (aE.item != null) {
            ap(aE.item, aB)
        }
    } else {
        if (aE.use == 1) {
            aE.use = 0;
            if (aE.item != null) {
                aE.item.use = 0;
                aE.item.bg = -1;
                B(aE.item);
                aE.item = null
            }
        }
    }
}

 

Link to comment
Share on other sites

Hi OSUblake,

 

there's an array f.posArr=[] which consist of 36 items initially with each item having the values 

 

for example. 

f.posArr[0] = {
                    pos: i * an - 90, // i is index from 0-35 and an is 10
                    use: 0,
                    cur: 0,
                    item: null,
                    no: i
                }; 

 

so in function  af(aE, aB, aD) paramters are given by the l() function

 

function l() {
            var aD, aB, aC;
            aD = f.posArr[0];
            aC = aD.pos;
            for (var aB = 0; aB < b; aB++) {//b is 36
                aD = f.posArr[aB];
                af(aD, aC + (an * aB), aB) //an is 10
            }
            aj()
        }

 

in af function transform style property is calculated and set for div items (26)

 

My issue is i got the initial load working and I just need to figure out how to rotate the divs in wheel as you can see in the link below 

 

http://fff.cmiscm.com/#!/main

 

Each div item has a class name called "items"

 

Need to figure out Draggable.Create function paramters which I'm unable too. Many example i looked upon was rotating outer main div 

 

 

Link to comment
Share on other sites

I really wasn't interested in what that function does. 

 

I would recommend starting over with your own code so you know how everything works. You don't rotate each individual div. You rotate the outer div. As an item reaches the top, you change it's z-index.

 

Here are some demos that might help you get started. They don't change the z-index, but it would be done in a onDrag callback for the draggable instance.

 

 

 

  • Like 3
Link to comment
Share on other sites

hi, I mange to draw the wheel of divs and rotate as per your above example modifying few bits. Right now I want everytime you rotate the middle div to have z-index of 100 and 6 divs on right of middle div to have z-index decreased by 10 and same for 6 divs on left of middle div. I've attached the html file please can you help?

 

total 26 divs 

 

 

scroll.html

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