Aspect ratio animation

[Fettahaud]

Hello

 

Firstly, it's weird how I'm first one who is asking about this(probably I'm diving deeply here 😁)

 

However, my question is simple, I have a box and I want to change it's aspect ration while moving based on path

 

Here is a helper image to understand the steps I want to go through 

See the Pen mdNbaYB by Fettah_Aud (@Fettah_Aud) on CodePen.

[mvaneijgen]

It seems like the browser converts aspect-ratio to 1 / 1, with spaces and this also seems to be the standaard https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

 

When animating complex strings it is best to provide the string in the same format. Converting it to include spaces fixes your issue. Probably converting your tweens to a .fromTo() would also work and you could then write it how ever you want. Hope it helps and happy tweening! 

 

See the Pen mdNbYGz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Fettahaud]

A tinny space was causing this issue, weird things!

 

Thank you for your time