mystrdat2
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by mystrdat2
-
-
-
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 asrgba(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.
- 1
-
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!
- 1
-
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 liketransformOrigin: '50% 50% -42px'
results only intransform-origin: '50% 50%'
being rendered on the element. Is there a way to either fix that or make GSAP NOT rendertransformOrigin
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
andscaleY
work fine.
Ideal way to invalidate a running animation and animate its current values to a new state
in GSAP
Posted
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 forever2) starts on
mouseleave
and should stop animation 1) and tween from its current values towards a different static valueBasically 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?