Jump to content
Search Community

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

Dylan Cristy 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

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