Relationship between CSS transform translate() and GSAP x:
Hi folks,
I simply do not understand the relationship between GSAPs x-property and CSSs translate().
It appears to me that x just doesn't care what translate is doing; like GSAP looks where the element is on first x:-call, and from then on on calculates its matrices.
Problem 1:
Seen in this CodePen I prepare an element to be off the viewport with CSS translate(114%) and want to animate it back to translate(0) with GSAP without hardcoding.
Problem 2:
is there something similar to
The core problem is actually related to the fact that browsers always report the current transforms in terms of a matrix() or matrix3d() which contains no information about percentage-based values. They're all baked into those px-based matrices, thus it's impossible for GSAP to know that you originally intended the value to be percent-based.
In other words, 114% gets converted (by the browser, not GSAP) to something like 68px (or whatever).
As a convenience (and this is actually quite
