Jump to content


Draggable Greenhorn

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

Hey guys, need some help.

svg symbol with draggable elements
used so far - plain javascript?
1.20.3 tweenmax.min.js
1.20.3 draggable.min.js

ok this is not crossbrowser - so look at this with latest chrome!

sometimes things are jumping. -> screenshots from my pen
(click, click drag - heavy tested)

2017-10-25 16_54_50-Draggable.png

2017-10-25 16_55_55-Draggable.png

2017-10-25 16_56_59-Draggable.png

2017-10-25 16_57_20-Draggable.png

See the Pen mBNeBd by mi_cky (@mi_cky) on CodePen

Link to comment
Share on other sites

Hello @mi_cky and Welcome to the GreenSock forum!


Thank you for creating a codepen example. I tested this in latest Chrome on Windows 10 and could only see this happening sometimes like in your screenshots. This might be happening more in Chrome when on Apple devices with Apple OS.


Can you please be more specific in exactly what your doing so we can try and replicate exactly what you are seeing.


I see the root of your problem being that your trying to access elements that are within a SVG <defs> element. Keep in mind that you shouldn't be targeting elements within an SVG <defs> element. They should only be accessed via the SVG <use> element. Since the SVG 1.1 spec dictates that elements within a <defs> element are not directly rendered. So you shouldn't be targeting those elements. Chrome might allow you to since Chrome does not follow the SVG spec at first, but later will honor the SVG spec regarding the <defs> element. So by doing  this your just asking for issues like your seeing in those screenshots.


SVG <defs> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

  • Graphical elements defined in a <defs> element will not be directly rendered.

I know you said "not crossbrowser", but that is the key in why you are having this buggy behavior in Chrome. When i view your code example in Firefox i see a NS_FAILURE_ERROR thrown error in the browser console. That is a namespace error when trying to access an element inside the <defs> element that doesn't exist in the render tree (DOM). The SVG <defs> element is not directly rendered along with SVG graphical elements, meaning it is not part of the render tree. So if you try to access an element that is a child of the <defs> element, the browser will return an error in the console of NS_FAILURE_ERROR, since the element is not in the render tree.  That is because Firefox follows the SVG spec, but Chrome is the wild west and allows you to do stuff that is non standard to the spec, but will render all buggy.


So you should try to do the same but don't target elements within the SVG <defs> element.

  • Like 6
Link to comment
Share on other sites

My guess is that you're trying to use the symbol because you'll have a bunch of those sliders in the final project?


As Sir @Jonathan mentioned, you shouldn't be animating elements in the <defs>. use could be tricky since you're animating several different pieces of the symbol. If it were me, I'd create one slider then loop through and create all the copies you need with clones. With that loop, you can set up individual tweens and controls on each copy. Just my two cents worth though. 


Happy tweening.


  • Like 4
Link to comment
Share on other sites

Hey guys,


ok correct my faults - sorry - rethinking my code and getting a more stable slider. Now you can drag the left side over the right one - vice versa.

Here the new codepen. 



See the Pen JOPmLE by mi_cky (@mi_cky) on CodePen


Again sometimes (rare) things are jumping. -> screenshots from my pen
(click, click drag - heavy tested)





@Jonathan - thanks for pointing me to the svg <defs> problem having changed that. Now it seems there is an other svg failure (Edge IE FF Safari - left and right dragger ok - but where is the range ??) cannot find my fault.


@PointC - your two cents are welcome :) - please tell me more about looping through and cloning - js code handling for the clones ??


and generallly - can someone tell me something about the "array notation" at the end of the - TR_Draggable creation - lastline ->  })[0];  <-

without i get an - Uncaught TypeError: TR_Draggable.applyBounds is not a function - and the draggable parts "breaking apart".

Here it seems i need help understanding GSAP.




Link to comment
Share on other sites

Regarding the array notation. Draggable.create() will return and array of draggables based on the number of targets you specify.


var myDraggable = Draggable.create(".box")[0]


allows you to create a reference to the Draggable instance that controls the first element found with a class of .box

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.