Jump to content
Search Community

Draggable wheel of divs

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 posted earlier to make wheel of divs rotate on drag similar to the link below 

 

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

 

To which @OSUblake replied and I used his feedback to build the attached html file. Now I have two issues

 

1. Every tme i drag it leads me to Greensock website, the property which forces if Throwprops:true. Please can anyone help me overcome this.

2. Second problem I have how to make sure the div in centre always has zindex 100? like the link above.

 

Please can anyone guide me. 

scroll.html

Link to comment
Share on other sites

Glad to hear you are making progress on your project.

Please take a few moments to learn how to use CodePen, Plunkr, jsFiddle or any other free online html editor. 

It doesn't require much more than copying and pasting your html, css and js into the appropriate panel and saving. 

 

The demo below already loads TweenMax and Draggable. Just "edit on CodePen", fork, add your code and save:

 

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

 

Trust us, it is soooo much easier than saving html files uploading them and making us download, look, edit, upload etc. 

 

From your demo it looks like the divs spin freely and fine when you drag. ThrowProps is responsible for the movement that occurs after you release – that super smooth flick and spin action. 

 

You are probably still getting re-directed to the GreenSock site because you are still loading the ThrowProps script. Remove this code

 

<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>

 

 

In order to detect which card should have it's z-index changed you could maybe use an onDrag callback to get the rotation of the Draggable. Based on the rotation of the Draggable you should be able to determine which card is facing up.

 

So if you had 4 cards spaced at 90 degree intervals (0, 90, 180, 270) and you rotated 180 degress you would change the index of the third card. You would probably want to build in some sort of padding so that you can detect whether or not a card is within a 5-10 degree range of each interval as the rotation will probably never exactly equal 0, 90, 180, or 270 (unless you are using snapping). And then once you set the z-index to 1 I suspect you will need to turn it off when they spin again. Draggable can generate the values you need and has a wide array of callbacks but there is still a decent amount of custom code involved to get it to work. There is a ton that goes into building a site like you referenced. It was ground-breaking when it came out years ago and still is.

 

There may be an expert around here who can whip something up but it isn't the type of use that is built into Draggable. We really do our best around here to help where we can with questions related directly to features provided in the GSAP API, but unfortunately we just don't have the resources (time) to be able to try to re-create these types of cutting-edge effects. A project like this would easily take me hours to set up and try to build the right way.

 

 

 

Link to comment
Share on other sites

Hi Carl, thank you for your reply appreciate it.

 

As suggested I built the code using codepen following is the URL

 

See the Pen OjQjjZ by anon (@anon) on CodePen

I removed the script which you suggested but still doesn't rotate freely. 

<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>

 

 

Link to comment
Share on other sites

Great. The CodePen demo is helpful.

 

Not sure I'm understanding the "rotate freely". Are you talking about the way it snaps to 10 degree increments because of the liveSnap code?

 

liveSnap:{
            rotation: function(value) {
                //snap to the closest increment of 10.
                return Math.round(value / 10) * 10; 
            }
        }

 

remove that code and it will animate smoothly when you drag. I may be mis-understanding so feel free to clarify

  • Like 1
Link to comment
Share on other sites

Hi Carl,

 

By rotate freely I meant ThrowProps:true property is responsible to actually show that its rotating freely and not dragging. 

 

If I remove the script below

<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>

 

And this is what I write

 

Draggable.create(wheel, {
          type: "rotation",
          throwProps: true,
          minimumMovement: 10,
          onDrag:function(e){
          },
          onDragEnd:function(e){
            debugger;
            
          },
          onClick: function(e) {    
            
          },
          liveSnap:{
            rotation: function(value) {
                //snap to the closest increment of 10.
                return Math.round(value / 10) * 10; 
            }
        }
        });

 

It doesn't move freely, looks like drag movement and not free movement.  Even if i remove the liveSnap function the movement is draggy no free

Link to comment
Share on other sites

See the Pen OjQjjZ by anon (@anon) on CodePen

The above codepen demo works with free movement because it has the script tag

<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>

 

But if i run it outside codepen when dragEnds it navigates to greensock website. If I comment the script tag above the movement is draggy. 

 

I hope you understood my query Carl, thank you again for your time and reply.

Link to comment
Share on other sites

ThrowPropsPlugin is the tool that allows things that are dragged to continue moving when you are done dragging.

If you want to use ThrowPropsPlugin outside of CodePen you will need to purchase a ShockinglyGreen or BusinessGreen Club GreenSock membership.

That way you can download the un-restricted version of ThrowPropsPlugin that can run anywhere.

 

https://greensock.com/club

  • Like 2
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...