Jump to content
Search Community


Jan test
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



i just was woundering if there is something around like the TransformAroundCenterPlugin for the JS version of GSAP. This time i just need a scale transformation. Can someone give me a hint?



Link to comment
Share on other sites

Hello Jan and welcome to the GreenSock forums!


Here is simple example of animating an element around a center point:

See the Pen imEzI by jonathan (@jonathan) on CodePen


It is using the transform-origin (transformOrigin) CSS property to position the origin point. No special plugin needed, just using GSAP to animate CSS properties with the CSSPlugin.


Default value of CSS transform-origin is: 50% 50% 0 (x y z)

var $circle = document.getElementById("circle"),
TweenMax.to($circle, 4, {
            transformOrigin: "50% 50% 0", // try changing value
            rotation: 360,
            force3D: true           

Does that help? :)

  • Like 2
Link to comment
Share on other sites

  • 2 months later...
unfortunately doesn't work within a <canvas>, i.e. when using easeljs.



Sorry, its not supposed to. transform-origin is a CSS property (modified by GSAP's CSSPlugin) that has no effect on canvas elements.


I'm pretty sure you an change the Easel regX and regY properties  though: http://www.createjs.com/Docs/EaselJS/classes/MovieClip.html#property_regX

  • Like 1
Link to comment
Share on other sites

yes, you can set the regX/regY properties; but I'm in a situation where I need to apply different scaling tweens to the same object which means changing the registration and resetting the location (so that it doesn't move) to do a second scaling tween… would be a lot simpler with TransformAroundCenter or better yet TransformAroundPoint functions

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.
  • Create New...