Jump to content
Search Community

How to animate x/y without touching scale

killroy 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

It seems that when animating x/y coordinates (via transforms), GSAP sets the  entire matrix, without taking changes to other properties into account.


In the codepen, I shake the display by animating x/y, and I update scale when the window resizes. If you resize the window while the shaking is taking place, GSAP modifies the scale, even though scale is not part of the animation.


Is there a way to purely animate x/y without touching other properties?


I suspect the reason is that GSAP animates the transform matrix, instead of individual properties.




See the Pen bdJdRO by killroy (@killroy) on CodePen

Link to comment
Share on other sites

Hi and thanks for the codepen!!


The problem is on your resize handler, basically you're using the style property of the display element and that was conflicting with the shake animations. Since the shake animations doesn't use scale I change your code to this (also renamed a variable for more clarity):

function handleResize() {
  var docW = document.documentElement.clientWidth;
  var docH = document.documentElement.clientHeight;
  var dispW = 1440;
  var dispH = 1080;
  var scaleX = docW/dispW;
  var scaleY = docH/dispH;
  // change the var name
  var _scale = Math.min(scaleX, scaleY);
  var xOffset = -(1920-(docW/_scale))/2;
  // remove the style apply
  // display.style.transform = 'scale('+scale+')';

  // use a set() instance to apply the style
  TweenLite.set(display, {scale:_scale});
  display.style.marginLeft = (xOffset*_scale)+'px';

And since GSAP lives in a ZEN state of harmony at all times, it doesn't have any inner conflicts :D, so the display can be resized and animated with no issue.


Happy Tweening!!

  • Like 4
Link to comment
Share on other sites

Well, I was aware that it would work within GSAP. I'm trying to keep my codepen prototypes as independent of 3rd party libs as possible. Here, the shake system used GSAP, but it basically "infects" everything else such that a system using the shake would now have to be modified to use GSAP throughout. Is there no way to tell GSAP which properties to modify and have it not modify others?

Link to comment
Share on other sites



The issue has to do with a battle for control of the transform property. When you click on the element GSAP gets the style object and applies certain values to the transform property using a matrix for that. When the screen is resized your code gets the style object and applies a different value to the transform property using a scale value. Basically one is removing the other and so forth. When GSAP is used to both events, basically uses the same matrix and changes the specific values indicated in the config object.


If you'd like to keep your code and not use GSAP for the resize, you'll have to jump into the matrix values created by GSAP and modify just the scale one:

 matrix(x 0 0 y 0 0)

Where x and y stand for the respective scale values on each axis.

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