Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by SimonWidjaja

  1. 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!
  2. 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!
  3. Yep. super annoying!!! Fortunately you guys are around to make our lives much easier Thanks for clarifying.
  4. 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
  5. 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...
  6. 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.
  7. 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?
  8. 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!
  9. 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 :)
  10. 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!
  11. 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;";
  12. 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.
  13. 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)...
  14. 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
  15. Hey guys. Can we still embed TweenMax in a self containing SVG file? I took an almost empty SVG file and pasted the TweenMax runtime code into a script tag. But I just get the error: "Uncaught TypeError: Cannot set property 'cssText' of undefined". I did exactly the same with anime.js which worked without any problems. I also saw this older tutorial by Chris Gannon ( ) It worked for him. Is that an older version or am I missing something important? Any help highly appreciated! --Simon
  16. ok thanks! then please consider an additional event callback "onStateChange" as a feature request As interim solution I will proxy/hijack all state changing methods of the timeline object and implement the state change propagation myself. I will let you know if it works...
  17. Hey Carl, thanks for the quick reply. I have already created my own Controller object to proxy the immediate timeline commands (pause, play, seek etc) as you mention. That totally works for my own "controlled" calls. But it's not working for other calls like timeline triggers etc. on dynamic timelines (e.g. with user generated custom actions that call timeline functions directly). So there is no other more robust (lower level) solution? The only solution I see right now would be proxying (overriding) the relevant state changing functions of the TimelineMax object. But that would be pretty dirty... Your thoughts? Thanks again for your amazing support!
  18. Hi GSAP enthusiasts, I am searching for the best way to propagate state changes on timeline level (e.g. "timeline was paused", "timeline started playing again"). There are event callbacks: "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat". But none of them is working for me... I am looking for something like "onStateChange" that I can listen for, to properly propagate state changes. e.g. tl..eventCallback('onStateChange', function(evt) { if (tl.paused()) { /*...*/ } else { /*...*/ } }) Is there any recommended way to achieve this? Any hint appreciated. Happy animating!
  19. Wow that was fast! Thanks a lot. I will dive deeper ...
  20. Dear GSAP Magicans, you were right: My mind was blown when I saw your ExpoScaleEase Demo today (Link: https://codepen.io/GreenSock/pen/NyXBbV?editors=1010 ). Can you please share some more hints how to create/prepare the asset/image fragments for this kind of animations?! E.g. coming from Photoshop or Illustrator. That what be super awesome. Thanks in advance and keep up the amazing work! --Simon
  21. Hey dada, did you find clarification? Would be nice if you could share your insights. I am facing a similar question. Thanks in advance!
  22. Thanks Jack for the update. I will check out your recommendations as soon as I find the time... Pre christmas is always pretty busy.
  23. Thank you so much for looking into it. I was spending more time trying to solve this problem yesterday, but it seems that I cannot use the GSDevTools as is in my case. My feature requests would be: update method to be able to see dynamically changed timelines or a way to reset GSDevTools and add/register timelines manually (e.g. GSDevTools.clear().registerTimeline(myTimlineLiteInstance);) or methods to entirely destroy and recreate the GSDevTool instance any time ...just my thoughts