Animating width vs. scaleX

[celli]

I understand that animating the 'width' or 'height' properties are not performant or recommended vs. using scaleX and scaleY, so I am trying to use scale.

 

The only issue is that while using scale, since my scaling of X and Y s not equal, my border-radius is effected and creates a strange shape. Is there anyway around this, or would it be okay to just animate the 'width' and 'height' in instances like this?

See the Pen oNdzRNv by celli (@celli) on CodePen

[ddi-web-team]

Is the weird shape being caused by your border radius not being updated? If you want your corners to be similar on the shape when it's larger, you need to lower the border radius set in your css. I added another tween to your timeline and fixed this issue. 

 

.to(floatingContact, {borderRadius: '2px'}, 0)

 

[Rodrigo]

Hi,

 

I don't think there is a silver bullet for this. If the scale was uniform on both axis, you could factor that value into the current border radius and update it accordingly. Since you're using two different scale values for X and Y, you'll have to factor each corner radius considering the ratio between both scales.

 

This is the first thing that came to my mind. While is not a perfect solution, it does look a bit better:

floatContactExpand
  .to(floatingContact, {
    scaleX:'5.6',
    onUpdate() {
      const { scaleX, scaleY } = floatingContact._gsap;
      gsap.set(floatingContact, { borderRadius: 8 / (scaleX / scaleY) })
    },
  }, 0)
  .to(floatingContact, {scaleY:'2.4'}, 0)

Finally, performance-wise, I think that rendering the box shadow could cause more work than the width/height animation, depending on the elements that sit under (z-index wise) the element you're animating and also the content inside the element you're animating.

 

Happy Tweening!!!

[celli]

Thanks for the insights.
 

Adding the borderRadius to the timeline will not help. Since you added 2px it might not be as noticeable as 8px, but it doesn't really solve the issue.

I think to Rodrigo's point I will just animate the width/height since performance-wise the shadow will be doing more work than the width/height calculations. I was hoping there was something I was missing that could accomplish this while keeping the border radius intact, but I see the issue and no silver bullet. Thanks again guys.
 

[GreenSock]

For the record, you should never do this: 

 const { scaleX, scaleY } = floatingContact._gsap

Do NOT tap into any property that starts with an underscore - that's considered private. That object is just for cached values that only GSAP should ever touch. If you write code that relies on it, there's a good chance it'll BREAK in future releases. The proper way to get scaleX/scaleY is to use gsap.getProperty(target, "scaleX") for example. 

 

Honestly I think it's fine in a case like this to just animate the width/height. I doubt you'd notice any performance difference. An alternative is to animate the border radius in a way that'd adjust for the non-proportional scaling but my guess is that the performance tradeoff with that would be just as much as animating width/height.