Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About cheestudio

cheestudio's Achievements

  1. Welp, I completely misunderstood AutoAlpha and why to use it, so damn glad I asked this question. I will animate just the opacity property and then just declare that ahead of time via CSS to prevent the flash. Thanks guys, as always! 🙌🏻👌🏻
  2. Hi all, Just a quick Q that I can't seem to find a good answer for: I am using GSAP to animate some elements in, but on page load, there's a quick flash before GSAP hides the elements. I read that I can use "visibility:hidden" within my CSS to hide the element before the JS execution. This works great!....but also makes it so Screen Readers don't recognize this content. I've read mixed messaging on whether a screen reader would execute the JS and then crawl the content, but in general it seems the consensus is: "don't use visibility: hidden", in the event the screen reader doesn't execute JS. But then...how else can I hide the element before page load and JS execution? I tried using just "opacity:0", which doesn't interfere with accessibility, but then GSAP's "autoAlpha" doesn't work! 😭
  3. It's OK, I'm not explaining it well enough and I don't expect you to dig into my code. I understand GSAP's angle on it, and I'm aware that it's nothing wrong with the core framework/functionality. We're good now!
  4. Very much so, and what I suspected. I imagine everything you wrote applies if I am using GSAP to animate a bunch of items above it, using X and Y animations? That's all that I had prior to this scroller element that would have shifted. I guess I somewhat assumed GSAP would be aware of that and adjust accordingly, but hell, it already does so much for me! 🤣
  5. AH! I found it. The preceding blocks didn't have the correct minimum height. So, a question: why do I need the minimum height on the preceding elements in the first place, especially when I had this ScrollTrigger wrapped in a load() function?
  6. As the title says...I wish I could built a codepen, but it's pretty complicated to isolate. Hoping someone can point me in the right direction. If you load this page: https://svcf.chee.studio/ You'll notice the scroll triggers appear here: Yet if you refresh the page when you're looking at this section, they appear where they should: I've tried everything; wrapping in load(), setTimeout(), ScrollTrigger.refresh(), applying a minimum height to the body and all preceding elements...but it persists! Here's the code as it stands...hoping someone has maybe come across this before and can maybe give me a lead, without having to re-create the whole thing in a CodePen! $(window).load(function() { setTimeout(function() { gsap.utils.toArray(".our-work-image-entry").forEach(function(section, i) { copyBlock = section.querySelector('.our-work-copy-entry '); ScrollTrigger.create({ trigger: section, start: "top 40%", end: "bottom 80%", pin: copyBlock, markers: true, onEnter: function() { section.classList.add("inview"); }, onEnterBack: function() { section.classList.add("inview"); } }); }); }, 500); }); I should also mention this is in Chrome on Windows, but I was able to replicate on FireFox, as well. What's interesting is on FireFox, if I reload the page, it starts working, but the initial load does the same behavior...I assume this is browser caching at work? I have no server-side caching enabled. On Chrome, I can replicate it each time I reload the page when the scroll is at the very top.
  7. The native shadowRoot approach seems awesome, but obviously not super production ready: https://caniuse.com/?search=shadowRoot
  8. How serendipitous...I just came across Lit by accident by typing in an address wrong (was going for lity.js) and I bookmarked it because it seemed so intruiging. I'm stoked to see an example in the real world! Thanks @OSUblake!
  9. @iDad5 I can see where you are coming from. I've ran into that situation once. I said good riddance, because I know the service I provide goes far beyond just the development skills I have, but also the comprehensive knowledge of a lifetime of tech work, impeccable and prompt communication, technical direction, and project management. For every client that doesn't understand the value, there's two that do! And the only time that did happen, I checked back a year later and the site wasn't even live any longer... 😛
  10. "You're supposed to do what the client wants (or what will delight them), even if it's semantically 'messy' sometimes." I agree...to a degree. I've stepped into some pretty terrible projects because the previous dev was an order taker and did what the client wanted, not what the client needed. When I tell the client why their site basically needs a re-write, they say "Oh, the previous developer never said anything, he just kept doing the work as requested." So, it's a balance, as well as understanding your client. Even after I speak my piece, they might still end up doing it anyway...but I know I've saved many hours of hairpulling from devs across the country because I was able to reign in some of the ideas and approaches that the client was thinking of doing. While we're a service based industry, we're also in a highly collaborative one. And yes, documenting things is huge; I try to code every site I make with the notion that I might win the lottery next month and retire, never to be seen again. A developer should be able to step into my work with minimal effort (hopefully). The only projects where I don't feel that hasn't happened, is when I "do what the client wants" more than doing what I know will serve them best in the long run...but as you said, at the end of the day we're in a service based industry and it's not a hill I'm willing to die on, since it's their project ultimately....but I'll always offer my "professional advice".
  11. This has developed into an interesting discussion. I love this community! I find I am always struggling between being a proponent of good web standards, while also understanding the limitations of technology and the reality of the "client request." It's a constant decision making process. I would love to be able to get clients to understand semantic HTML, not relying on JS for layout and "polyfills" too much, being mindful about load time (every character counts...no pun intended) and maintainability of the code base, especially for future devs. @Ginger Soul I can't tell you how many sites I've stepped into where the previous dev went full on "let's just hack it together and do whatever the client wants" and it ended up biting the client in the booty in the long run, since the code base became too difficult to unwind or make modifications to. Sometimes it almost seemed intentional, as if they were trying to make it in such a way that only they could figure out how to change things. Not saying that this is what you're suggesting or condoning, it just got me thinking about that approach and the slippery slope it can lead to. On the other hand, if I stick to my "purist tendencies", what you say is also true, and my work might not stand out as much as it could and blends in with all the other run-of-the-mill developers. So it's a constant balance, weighing and "cost/benefit analysis" of the situation. In this particular case, is a non-semnatic empty div or pseudo selector, a few extra lines of CSS and some JS worthwhile to generate a dropshadow effect that is performant on mobile? For the status of the client (international marketing agency) and for the overall minimal codebase otherwise (small site), my gut is saying "absolutely." But that's the constant battle we must fight, because if you're too cavaliar and just do whatever the client wants without regard, you could end up doing them a disservice. And they don't know one way from the other, and they look to us as professionals to make those recommendations and have their best interest at heart. I've pushed back on many a' client requests and when I explain the potential impacts, they almost always say "Oh wow, I had no idea, thanks so much for educating me...let's find an alternative solution!" (which I always try to have ready). OK, I digressed, meandered and blathered, but I don't get to "talk shop" very often....so yeah, thanks all! And @Cassie, I remember coming across your stuff when it was featured somewhere (CSS Tricks, maybe?). You're a digital magician and your stuff has inspired me numerous times! 😊
  12. AHA! It was the Box Shadow! Drat. I guess I'll use matchMedia and scope it, because the client REALLY loves the box shadow effect on desktop. Thanks for the prompt reply, Blake!