Jump to content


draggable transform issue

Recommended Posts

Hey all,


Browser : Chrome,

OS : Windows 7 x64


codePen : 

See the Pen eybkF by Stefdv (@Stefdv) on CodePen


The problem(s);


When i switch between sliders, the sliders don't always correspond to the current tranform of the box. There is als a 'jump' when i switch between slider adjustments.


another issue: i can't seem to make a rotationZ for 180deg...at least it's not rotating right then ?


Any help would be appreciated ( a lot  :-P )

Link to comment
Share on other sites

Hello Stefdv,


rotateZ() is the same as rotation in GSAP.


Try this:

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


In GSAP the property equivalents:


rotateZ() = rotation

rotateY() = rotationY

rotateX() = rotationX


translateX() = x

translateY() = y

translateZ() = z


Does that help?

Link to comment
Share on other sites

Jonathan, tx..


I just figured that one out thru the _gsTransform properties...tx anyway.


Still leaves the problem that if i make quick adjustments with the sliders, the box 'jumps' sometimes and most of the times it does not return to the original position if i put all sliders back to zero.

Link to comment
Share on other sites

Did you try my example with using the GSAP properties instead of the using the shorthand transform properties?


Also i notice your setting perspective and transform-style to the body tag.. any reason why?


I would add an extra div around your #box div and place those CSS properties on its parent. By adding perspective and transform-style to the body tag.. it will cause even your UI sliders to inherit that perspective and transform-style which can cause some weird rendering issues.


But.. you could also try adding force3D:true to your tweens which should tell the browser to use hardware acceleration for smooth butter.


this example uses force3D: true:


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



  • Like 1
Link to comment
Share on other sites



I just forked your pen and added the GSAP syntax to each instance and I don't see any jumps or position issues:


See the Pen tGyrb by rhernando (@rhernando) on CodePen


Also instead of using this set up for the 3D space:


You can use the CSSPlugin default perspective sette, which adjusts the perspective for every element being animated in 3D space, like this:

CSSPlugin.defaultTransformPerspective = 1200;


  • Like 2
Link to comment
Share on other sites


I placed perspective and transform-style on the body tag because i was lazy ;)  Never thought about the effect it could have on other elements....so lazy and sloppy.



I thought the CSSPlugin was already in TweenMax, or at least that there was no need for it when using TweenMax...So much to learn :)


Thank you both...problems solved.

Link to comment
Share on other sites

To clarify, CSSPlugin is inside of TweenMax.js, no need to load it separately.

Rodrigo was just illustrating how to adjust the defaultTransformPerspective property of CSSPlugin.

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.