Jump to content
Search Community

SDP

Members
  • Posts

    4
  • Joined

  • Last visited

Everything posted by SDP

  1. Thanks Jack. #1 solves the momentum mystery. Thanks for clarifying. #2... Later I will experiment to see if the <div> wrapper trick works, but ultimately it won't solve my problem because my actual SVG is a bit more complex. (I stripped out some elements to make the demo more readable) So although the jsfiddle makes it seem like a trivial change to just wrap the svg in a div, in my real svg I would end up rotating a bunch of extra elements (that I don't want to) also. Does that make sense? Do I correctly infer from your answer that Draggable does not "officially" support SVG elements? So what I'm trying to do just might not be possible? Update: Although it does not solve my problem yet, <div> wrapper trick does perform as expected: http://jsfiddle.net/s_d_p/hNz29/
  2. To demonstrate the strange rotation behavior, I created a jsfiddle here: http://jsfiddle.net/s_d_p/sy4AN/7/ Just click/drag one of the dots and try to drag a full 360 degree rotation. You'll also see that I'm loading TweenMax and the momentum is not happening either. My hunch is that this has related to the way X and Y coordinates work differently in SVG (the Y axis starts from zero at the top and increases as you move downward). Perhaps this is the problem? Or is this plugin meant to play nice with SVG already? Thanks for your help!
  3. Thanks for the reply. I was under the impression that ThrowPropsPlugin was included in TweenMax.js. (I realize that the code I originally copy/pasted above incorrectly showed TweenLite.js... just corrected it) Does this new information change your advice at all?
  4. I am trying to use Draggable to rotate a <g> inside some inline SVG. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/utils/Draggable.min.js"></script> ... TweenLite.set(".group1", {transformOrigin:"50% 50%"}) Draggable.create(".group1", {type: "rotation", throwProps: true }); This will allow the element to be rotated by dragging, but none of the momentum works and the rotation is incorrect in that the movement shifts from clockwise to counter clockwise mid-drag.
×
×
  • Create New...