Change transformOrigin AFTER a scale animation

[daweed31]

Hi,

I would like to change the transformOrigin after a first animation of the scale (for make in the future another animation with a différent origin). The problem is that there is a jump. Is there a solution for avoid it ? Thanks you in advance !

PS : I made a codepen with minimal code (https://codepen.io/daweed31/pen/WBPMaQ). The real project is more complexe : scale a grid of picture with a vertical transformOrigin equal of the scroll, and when the user decides reverse the scale with a different transformOrigin. You can see a gif of the real project here (10Mb) : felixfaure.fr/images/gsap_transform_origin.gif

See the Pen WBPMaQ by daweed31 (@daweed31) on CodePen.

[GreenSock]

The jump is completely normal because of the way transforms work (totally unrelated to GSAP). If you scale something from its bottom left corner, it ends up at a completely different place than if you scale it from its upper right corner. 

 

If you want to change it dynamically without the jump, you'd need to compensate its translation (x/y). Here's a fork of your codepen that uses a function I whipped together for that purpose: 

See the Pen ffd4d338f911617756aa1daaa96d8c5d?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

The function is: 

function smoothOriginChange(element, transformOrigin) {
  if (typeof(element) === "string") {
    element = document.querySelector(element);
  }
  var before = element.getBoundingClientRect();
  element.style.transformOrigin = transformOrigin;
  var after = element.getBoundingClientRect();
  TweenLite.set(element, {x:"+=" + (before.left - after.left), y:"+=" + (before.top - after.top)});
}

 

Does that help? 

[daweed31]

Thank you so much your function will help a lot ! Have a nice day !

 

[GreenSock]

Glad it was helpful. I just added it to the "Helper functions" in the docs: 

https://greensock.com/docs/HelperFunctions

 

Happy tweening!