SimonWidjaja

Hey Cassie! Thanks for the quick response and the extremely useful link. I am not a performance expert, but that table tells me that animating backgroundPosition will result in more heavy lifting and more animation janks than moving the entire element via transform/translate, because it will add additional painting that is not needed with translates... Is this interpretation correct? Thanks again. Highly appreciated!

I need to create an infinite horizontal full-width slide animation. I have a general question regarding performance. I know that the "white listed" high performance properties like transform, opacity should always be preferred. But I didn't find any information on the performance of animating backgroundPosition. Good idea or bad idea? Especially if the element is pretty huge (e.g. 2560x400px). Not sure if that makes a difference in context of backgroundPosition... Thanks in advance!

Yep. super annoying!!! Fortunately you guys are around to make our lives much easier Thanks for clarifying.

Setting will-change: transform did the trick. Strange. I thought force3D would force a pseudo 3D transformation and rendering on its own rendering layer to enable sub-pixel rendering and prevent pixel-snapping. But force3D didn't fix my problem. Can you please clarify when to use which technique? Thanks for the quick response (as always

I am experiencing a strange "jumpy" text issue on a very basic pulsating button (div with text). I have attached screen recording to demonstrate the issue. My project is a larger React app, so creating codepen is more complicated... Does anyone have an idea what is happening? It looks fine in Firefox. But it's jumpy in Chrome (current version) and Edge. This is my (super basic) gsap loop: gsap.to(cta.current, { scale: 1.02, ease: 'power4.inOut', yoyo: true, repeat: -1 }) Screen Recording 2021-07-21 at 18.47.20.mp4 I have tried to force3D, but didn't have any effect. It feels like the text is trying to fit the pixel grid and snaps to the closest pixel...

Thanks. Zach. That is exactly how I ended up. Works like a charm... I just thought there might be a more elegant solution. But it's still pretty straight forward! I can totally live with that.

Hi. Is there a way to get the current step # in onUpdate callback when using ease: 'steps(123)'? I was spending the last hour trying so, but without any luck. I could read out the current backgroundPositionX and use that to recalculate the current step #. But that is not very performant and more a workaround. I bet there is a smarter way to achieve that in GSAP, right?

Thanks! I will check it out asap...

Thanks Zach for the feedback. I was afraid so... I basically just want the element to scale around its current center (whatever that may be). So let's assume I want to achieve that by getting rid of the transformOrigin in CSS. I would have to alter the matrix transform accordingly, right? Do you have any hint how to do that the right way? .el2 { transform: matrix(0, 1, -1, 0, 300, 100); } That would do the trick. But how can I safely alter the matrix like this so that get to these values even if there are more complex rotations etc involved? Are there any good libraries out there you can recommend? Thanks again!

Hey GSAP enthusiasts, I have a problem with the following scenario: I have two image elements: .el { position: absolute; width: 100px; height: 100px; } .el1 { transform: matrix(1, 0, 0, 1, 100, 100); } .el2 { transform-origin: 0 0; transform: matrix(0, 1, -1, 0, 400, 100); } The second element "el2" has an initial rotation applied and also the transformOrigin set. Now I use gsap to animate both elements like this: gsap.to('.el', { delay: 2, repeat: -1, yoyo: true, transformOrigin: '50% 50%', scale: 2 }); When running in the browser I see the second element "el2" making a jump to the right, before the animation starts. I know that it's not the best practice to set transforms/origin in CSS instead of initialising these properties via gsap.set(...). But in my scenario the code (Markup and CSS) is being generated, so I don't have control over it. Is there anything I am missing or is this an unsupported edge case? (Not 100% sure if this comment might be related: ) Thanks in advance and keep up the amazing work. (BTW: loving the new ScrollTrigger :)

Huh. The last post was based on the non-compressed version from aws. I extracted the minified version from your provided file (gsap-fixed.svg) and now I don't see that error anymore. Very strange. I don't see any reason why the minified one should behave differently. But I am happy, it's working Any idea when this version will be shipped? (I am doing some workshops so it would be nice to share that info as well) Thanks for your amazing support!

Thanks Jack, for providing that version. But it's still not working. Here are some more information: + I am also getting the error in Chrome (Version 73.0.3683.103 (Official Build) (64-bit) and Canary as well) + I am using CDATA wrapper + The source of the error seems to be line 2734: a.style.cssText = "top:1px;opacity:.55;";

Ok thanks. Quick update: I fully reconstructed Chris' version successfully. So 1.16.1 did NOT throw that error. Same with 2.0.0. So the problem only occurs on more recent GSAP versions... One more update: TweenMax v2.0.2 seems to be the most recent one that does NOT throw that error. Everything newer throws it.

yes. e.g. for offline usage. And I think it doesn't even matter. Even if I link to a remote CDN version I will end up with the same error. I think it's not relevant how I embed the runtime but what the context/environment is (in this case a self containing SVG, so no HTML DOM)...

Hi @mikel! It's a general question. Just want to know if embedding GSAP (TweenMax runtime) in a self containing SVG is supported or not. So the only code I have added to my svg is the GSAP code. No animation code yet. So during TweenMax runtime start I get the provided error "Uncaught TypeError: Cannot set property 'cssText' of undefined". I guess it must be caused during the registration process of GSAP on global/document/window level... I would love to provide a sample (even though there is basically nothing in it ) but codepen doesn't support a self containing SVG only HTML. ...I have attached the SVG file. If you open it in a browser you will see the error. Cheers, --Simon gsap.svg