mystrdat2

I have 2 animations: 1) starts on mouseenter and has some random properties so it needs to be initialized fresh on every new event. It also loops and yoyos forever 2) starts on mouseleave and should stop animation 1) and tween from its current values towards a different static value Basically at some point I need to stop animation 1 yet keep it's animated value, and use that value for a new animation. How would I ideally achieve this with the API?

Hello, I'm getting a strange result when trying to animate CSS gradients where only the colors are different. Instead of just shifting the colors, GSAP seems to try and animate the angle, which is the same on both however. See attached pen

How would I go about animating the CSS variable itself? I have an inline variable on the parent as --color: RRR, GGG, BBB and this is used in multiple different color gradients on children as rgba(var(--color), 0.6) etc. I'd like to animate the values in the inline parent definition so the changes naturally propagate into the children instead of directly modifying them. Nevermind I found the answer here.

Hello, thanks for the reply. In my case, the magical transformOrigin handling seems to produce an undesired outcome and scales from wrong origin, but since it doesn't scale Z anyway I guess the point is moot. As far as the usecase, I can't directly share the client's project, but I have a grid of cube-like items that shrink on the z-axis on interaction with an origin point on the center of the backface (the cube sort of pops in and out). I guess I could show content on another face and rotate the object so I can use a different axis for the scale transform to work around the limitation. Thanks again for the insight!

Hello, I have the following issues with GSAP 3 and any help would be much appreciated: 1) transformOrigin doesn't accept a Z value. Setting something like transformOrigin: '50% 50% -42px' results only in transform-origin: '50% 50%' being rendered on the element. Is there a way to either fix that or make GSAP NOT render transformOrigin at all so it can be applied correctly from styles (aside using !important)? 2) Scale on the Z axis seems to be missing. If I animate scaleZ transform values, the animation doesn't make any changes in the DOM. scaleX and scaleY work fine.