Jump to content


Resize and rotate an SVG with handles

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'm having trouble figuring out how to properly resize and rotate and svg element. Any suggestions to make this work? Rotating works well, but the scaling resets the rotation and the math is way off.


A bonus would be if the handles could move with the resized element but not rotate or resize themselves. Just the red B should be transformed.  :)



See the Pen EyzoBX by rustydev (@rustydev) on CodePen

Link to comment
Share on other sites

Hello, and Welcome to the GreenSock forum!


Sorry you having problems rustydev. We appreciate the codepen demo example!


It looks like some of the logic inside the scale onDrag callback might be breaking the transform scale. You could also use scale: ratio instead of the transform string .. transform: "scale("+ratio+")" .. when i console out the ratio i see the browser console outputting Infinity for scale. So You will probably also need to add an if statement to make sure scale ratio does not go past a specific scale factor to prevent that ratio from going to Infinity which is breaking it.


Please allow us some time to look at and test your example to see what might be going on?


Thank You! :)



  • Like 1
Link to comment
Share on other sites

Amazing! Thanks for that link. That looks exactly like what I'm trying to achieve.

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.