Jump to content


SVG Draggable bounds. Scale and Rotate

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 try to solve problem with setting up bounds params in Draggable. (SVG element)



This should work like this. This example has only Scaling

See the Pen DFEkx by amonk (@amonk) on CodePen



I tried to manually compute bounds to {minX,maxX,minY,maxY} using _gsTransform and scale, but when i rotate the object something bad work. 



See the Pen yydpYd?editors=101 by amonk (@amonk) on CodePen

Link to comment
Share on other sites

This looks like it may be an SVG issue. I'll have to look into it and get back to you. 

Link to comment
Share on other sites

  • 2 weeks later...

Alright, I believe I figured out what the issues were:

  1. You were linking to SUPER old versions of both Draggable and TweenMax.
  2. SVG elements don't report offsetWidth or offsetHeight like "normal" elements, so I had to implement a workaround in Draggable for the bounds to work properly
  3. You were defining a transform on the SVG using the transform attribute (rather than CSS style). Newer versions of TweenMax/CSSPlugin did allow for matrix() values there, but you used a translate().
  4. You didn't set preserveAspectRatio="none" style="background-size:100% 100%" on the <image> element, so there appeared to be a gap on the left and right edges since the aspect ratio of your image and the file you were loading didn't match. 

I uploaded preview versions of the upcoming release of TweenMax and Draggable and then forked your codepen and dropped the fixes into place:




  • Like 3
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.