en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en ru en en en en en en en en en en en en en zh en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en en en en en en en en en en en de en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ms en en en en en en nl en en en en en en en pt en hu en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
Hey guys, need some help.
svg symbol with draggable elements
used so far - plain javascript?
ok this is not crossbrowser - so look at this with latest chrome!
(click, click drag - heavy tested)
See the Pen mBNeBd by mi_cky (@mi_cky) on CodePen
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   element. Keep in mind that you shouldn't be targeting elements within an SVG   element. They should only be accessed via the SVG   element. Since the SVG 1.1 spec dictates that elements within a   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   element. So by doing  this your just asking for issues like your seeing in those screenshots.
Graphical elements defined in a   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   element that doesn't exist in the render tree (DOM). The SVG   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   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   element.
Share on other sites
PointC    14,034 Likes (Superhero)
Posted October 25, 2017
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  . 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.
Share on other sites
mi_cky    25 Likes (Newbie)
Posted October 27, 2017
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   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.
Share on other sites
Carl    10,905 Likes (Superhero)
Posted October 27, 2017
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
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 4
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
“I really need to commit to using GSAP more in my daily work & demos. I love pushing native CSS animation as far as I can but every time I use GSAP I’m just blown away. Keep up the great work!”
“This is by far the fastest and most active community I've ever seen for getting personalized answers to questions. Only with the help of GSAP and this forum was I able to accomplish my project.”
“GSAP has been absolutely the best experience for me as a newbie. The people in this community take serious time to help you with upcoming issues on real life projects like I've never experienced before.”
“The depth of GSAP blows me away like all the time. It seems like I stumble on something new and amazing every time I peek at the docs.”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the GreenSock API makes learning and applying these tools in projects such a dream.”
“I continue to be astounded by the sheer breadth of what @greensock can do. Every time I'm like "ooh, I wonder if I can do X", it turns out I can!”
“GSAP IS the animation library and has been for years. If you're gonna learn one - this is it.”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.