Set transform with quickSetter

[Théophile Avoyne]

Hello there,

 

I'm getting some trouble using quickSetter to set the css transform (scale) property of an element. The only way I found to make it work is this:

gsap.utils.pipe(
  (val) => `transform: scale(${val})`,
  gsap.quickSetter(image, 'style'),
);

However, it isn't ideal since it entirely replaces the existing style property of the element.

 

What I've tried:

gsap.utils.pipe(
  (val) => `scale(${val})`,
  gsap.quickSetter(image, 'transform'),
);

gsap.quickSetter(image, 'scale');

Both give me the same error in the console :

Failed to execute 'setAttribute' on 'Element': 'x,y,z,scale,scaleX,scaleY,xPercent,yPercent,rotation,rotationX,rotationY,skewX,skewY' is not a valid attribute name.

 

Any suggestion?

[ZachSaucier]

Hey Théophile.

 

This is because the actual properties that you need to set are scaleX and scaleY. .set() allows you to use just scale as a convenience. With that being said, you could create a helper function for it if you'd like. Something like this:

const setScaleX = gsap.quickSetter(elem, "scaleX");
const setScaleY = gsap.quickSetter(elem, "scaleY");
const setScale = (val) => {
  setScaleX(val);
  setScaleY(val);
};

setScale(0.5);

 

[Théophile Avoyne]

Thanks for responding, Zach.

 

Ok, I understand now. I'm so used to .set()that I forgot 'scale' was a convenience.

 

I ended up doing this (which is equivalent to what you suggested):

gsap.utils.pipe(
  (val) => ({ scaleX: val, scaleY: val }),
  gsap.quickSetter(image, 'css'),
);

 

Thanks again!