Jump to content


  • Posts

  • Joined

  • Last visited


9 Newbie
  1. We're using GSAP quite extensively in http://rhinogram.github.io/rhinostyle/ without any 3rd party libs to control how we interact with it. You can also check out this branch https://github.com/rhinogram/rhinostyle/tree/zach/modal-append-example that is an update to how we deal with Covers and Modals (that need to append to the body) by using https://github.com/jpgorman/react-append-to-body
  2. No worries at all! I really appreciate you taking a look at that. And yep, working ? now. Thank you very much!
  3. Hi, I was having some trouble with the latest GSAP (1.20.1) and the TextPlugin -- not showing any errors, just not actually doing anything. I also tried the referenced CodePen (the official example) and that doesn't appear to be working either there when I switch out for the latest GSAP. Any thoughts? Maybe a build issue? Not sure if other plugins are also impacted.
  4. Whoa, looks like the latest beta is tagged 1.20.0 -- maybe getting some extra goodies in there? ?
  5. ? Thanks for the update. I think we'll probably hold off until the official release, but it's great know this will be in there soon. Thanks again for looking into this so quickly!
  6. Hey @Carl, ok thanks - fair enough. I know this is the dreaded "next question" that you get too often and hate answering, but was there a target date set for the next release? Thanks!
  7. Hi, Is there a way to install GSAP from npm still that has the latest code? Going on https://github.com/greensock/GreenSock-JS only shows the latest release. Thanks!
  8. That did it! Thank you very much for looking into this. Yeah, the whole reason we went down this weird route was due to that other forum post I linked having that weird, jittery bug on resize. Chrome definitely has its quirks, but once again, GSAP to the rescue! Have a great night!
  9. Hi, Thank you very much for all the help with I ultimately decided to give this another shot a different way -- which was re-using the existing HTML structure we have in our app and taking the class-based animations and putting them in GSAP. What I've noticed (from the CodePen URL) is that the `min-width` property is not resetting back to 100% in IE11 and Edge. If you try that demo in Chrome, Safari, or Chrome, things work as expected, but it stays at that "complete" value I have in the tween. Any help would be great appreciated as this doesn't suffer from the resize-jitters the other example I had did. Thanks!
  10. Hey everyone - thanks for sticking with me on this. Yeah the jitteriness with the buttons and message is part of the issue there; so that's entirely based on rem? Thanks @Carl for mentioning the Modifiers plugin, that's super useful (but yeah I guess doesn't really help out here). Another dev was talking to me about this and mentioned that when he was originally working on this panel system in CSS (I'm re-doing it in GSAP) anything he did that transformed anything but 100% would cause blurry text in Chrome; so since I'm seeing something similar, I wonder if this is outside of GSAP.
  11. Thanks for the tip about using x/Y Percent. Unfortunately it appears to be an issue with flexBasis as removing those properties does not cause the jitteriness on resize. Is there a way onUpdate to force the calculation of the container to always be the lower-end of the pixel calculation for the container it is interacting with? It's just so odd that this is only an issue in Chrome (59).
  12. Hi @Jonathan appreciate the reply! I tried both the rotation and z properties like you mentioned, but that didn't make a difference. I've noticed that if I translate the wrapper by a whole value (like 100%) the bug is not there; it appears only when I'm interacting with calculations that would render a subpixel.
  13. Hey Blake, Thanks for taking a look. I've made that pen public. Are you on a non-retina screen by chance? We were noticing the issue when viewing in debug mode https://s.codepen.io/zslabs/debug/jmRYLR and both the convo and profile panels were open (on desktop view so you can see them side by side). In the compute panel within Chrome, the text was blurry on decimal pixel values of the surrounding `.convo-wrapper` and `.profile-wrapper` We're seeing lots of "jittering" with the message and button elements. I did just upgrade to v59 and restarted, but still there.
  14. Hi all! I've created a CodePen that shows off a panel animation I'm working on for the backend of my app (obviously simplified for demonstration). If you click through with the buttons on the top (have a large screen so you can see the convo view slide over with the inbox view still there) you'll notice I'm animating the panel widths with flexBasis. On resize EVERYTHING is jumping around when Chrome hits half-pixels (look at the sample convo and button, as well as the pseudo selector text)... but it's only Chrome from what I can tell. It almost seems like it's an issue with how the values are calculated, but I'm unsure if this has anything to do with GSAP. I've tried `will-change: transform`, the typical `backface-visibility` tricks, and even setting `force3d: true` in the animations, but it's just not working. Any tips on how to avoid all the jitters would be much appreciated. I'm also noticing some bluriness on non-retina screens. Thanks! Try to look at the demo in debug mode.