Jump to content


Using Draggable rotation with '50% 50%' transform origin on a 'top left' origin element

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



Is it possible to make an element that has a transform origin set to 'top left' rotate (using Draggable rotate) around the element's center, as if the transform origin was originally set to 50% 50%?


I was thinking perhaps to temporarily changes the transform origin yet keeps the element in the same position in the onDragStart event and in the onDragEnd event to restore the 'top left' origin, is that possible? 





See the Pen JKoyXE by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi beamish :)


Maybe I'm missing something, but I'm a little confused by your question. You could do anything you want on start/end of the drag, but I was curious what you're trying to accomplish. Are you going to be doing something else with the element that you need the origin in the top/left rather than just set it to the center?



  • Like 3
Link to comment
Share on other sites

Hi :-)


I need the origin to be in the top left because I'm adding functionality that enables the user to resize the element and the resizing should not be from within the center of the element but from the top left corner.  The user is also able to rotate the element but the rotation is more intuitive and friendly when originating from the center of the element and not from the top left corner.  I hope this clears things...


Thanks for showing interest :-)



Link to comment
Share on other sites

o.k. - I see what you need now.


When an element is draggable and resizeable, a re-size handle of some sort is usually a good idea as a visual clue for the user.


Diaco has a really good pen that does exactly what you need. His draggable is set to x/y, but you can fork it and set it to rotation to see how he made it work correctly.

See the Pen QbGOpp by MAW (@MAW) on CodePen


Hopefully that helps.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

Hi PointC,


Thanks !


I've added some code to the pen you suggested to add the rotation functionality: 

See the Pen MeYdXE by anon (@anon) on CodePen





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.