Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dylan Cristy

Can't get Draggable rotation to work on SVG <g>

Recommended Posts

I am trying to set up some concentric circles that are draggable/rotatable, and I'm trying to set it up on <g> tags because there are going to be some smaller SVGs that need to rotate around as if they were attached to the large color bands.

 

I read the pinned SVG gotchas thread, and although it doesn't mention <g> tags, it's clear that it should work because it works here:

 

See the Pen MwaJVK?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

Some notes about my codesandbox demo:

 

  • I had some issues trying to use TweenLite  by including gsap as a dependency and using a regular import, so I commented out the imports and added CDN links to TweenMax and Draggable in index.html.  Clearly Draggable is loaded and works because I also made an extra draggable div just to make sure.
  • The ultimate behavior I am looking to get is that the concentric bands should be rotating infinitely.  If a user clicks on one of the bands, the rotation stops and the band becomes draggable.  Once the user clicks on a different band, the rotation starts up again.  There are two sections of code that are commented out right now, but if you uncomment them you will see the rotation animation/pausing behavior working.  The part that's eluding me is the draggability.
  • All the important stuff is happening in the BaseBand.jsx file.

 

Any pointers on how to get draggable rotation working on an SVG <g> tag would be very welcome.

 

See the Pen by s (@s) on CodePen

Link to post
Share on other sites

Hi @Dylan Cristy :)

 

Welcome to the forum.

 

Since these are clickable you need to set dragClickables to true:

 

Draggable.create(`#${this.props.bandName}`, {
  type: "rotation",
  dragClickables: true
});

 

dragClickables:  Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true.

 

More info:

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

 

Happy tweening.

:)

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites

Aha!

 

Thanks @PointC, that did the trick.

 

Now I just need to figure out why that breaks the un-pausing/restarting of the rotation animation...

Link to post
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.

×