Animate different units of transform origin property

[Sirisha Pendem]

Hi, I'm trying to implement the following effect from animista https://animista.net/play/entrances/slide-in-elliptic

Here the transform origin property changes from "50% 100%" to "50% 1400px"

But if I give the same values to gsap, the transform origin property remains at the initial value and doesn't change.

How do I animate a css property whose values differ in units?

 

Thanks in advance.

See the Pen rNMLryR by cjayanth95 (@cjayanth95) on CodePen

[ZachSaucier]

Hey Sirisha. In cases like this to convert between units you should do the conversion yourself. In this case the 100% means 100% of the element's height. Also keep in mind that GSAP doesn't animate transformOrigin by default (because almost always this is not desired) so to do this effect exactly you should update the transformOrigin in the onUpdate. Here's one way to set it up:

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