cheestudio

Definitely nothing 3rd party. OK, well, if it's nothing obvious, I'll keep digging! It's not a huge deal if I exclude, since there's not tree shaking happening in the build itself (thankfully).

Not entirely sure how I can replicate and demonstrate, since I'm using an entire Gulp build system to compile our JS, but I am utilizing SplitText and registering the plugin this way: gsap.registerPlugin(ScrollTrigger, SplitText); Which once compiled, starts to introduce a slew of JS errors (not necessarily related, just stuff that happens down the line). If I switch to this, everything works fine, including all my SplitText functions: gsap.registerPlugin(ScrollTrigger); I am fine with leaving it out, but I'm curious why this happening, since it seems to be the "correct" way to implement GSAP plugins? And even more curious that registering ScrollTrigger does not incur any errors?

Haha, well yes, I knew it was for scroll smoothing! ? Clearly I wasn't phrasing my question well. It was more about why someone would smooth the scroll of just a "part" or section of a page, rather than the entire page itself. But if you apply it to the entire page, you're now suddenly in charge of having to listen for events that could change the DOM length. But holy wow, how have I not heard of ResizeObserver before?! And browser support is really decent. Thank you, Cassie!! Do you think this is problematic from a performance perspective?

Hey all, This is a general question: I attempted to use the ScrollSmoother for a site, but I am curious if that was not it's intended purpose? Because whenever there was a height change for any reason, such as an FAQ module expanding content on a page, the ScrollSmoother's wrapper did not update the height. I realize I could call ScrollTrigger.refresh() after those events, but they won't always be in my control to know if those events are occurring (ie.. client installs a WordPress plugin that adds some kind of feature involving dynamic content). Which got me thinking: perhaps I am misunderstanding the use of ScrollSmoother? Is it not meant to be something that controls the experience of a site's scroll? And if not....what is meant for? I would find it odd if only a section or animation of a site was smooth and the rest of the site "standard", and wrapping an entire site with it didn't seem like it was sustainable.

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! ????

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! ?

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!

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! ?

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?

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.

*insert mic drop gif*

The native shadowRoot approach seems awesome, but obviously not super production ready: https://caniuse.com/?search=shadowRoot

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!

@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... ?

@OSUblake you're a god damn madman!

"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".

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! ?

Thanks, @iDad5! I'll give it a spin.

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!

I can create a codepen, but I figured we can start here with the actual site, since it would be a significant amount of work to replicate this a CodePen, and I have a feeling it needs to be seen in it's entirety to debug properly. I've run into my first real performance issue with a GSAP config and I'm not sure where to start, because the site is really simple and minimal and this site works fantastically on desktop. I'm pretty flabbergasted that it's basically unusable on mobile, because I've done WAY more advanced things with GSAP with almost no performance issues, so I'm really not sure what I am missing here: https://ebook.chee.studio/ It's more or less in the vein of the Revealing Sections from Bottom Demo (embedded below) In this case however, every section was wildly different in terms of the amount of content/height, so I needed to run a loop and calculate unique end points for each section so each one scrolled at the same rate. I also needed to use position:fixed in my use case, but I am using "will-change", but not sure if maybe that's a potential problem since I've seen fixed positioning cause issues on mobile before...also not sure how to make this experience work without it, though. Here's the main "engine" script running the experience...there's very little JS otherwise on the site: var panels = gsap.utils.toArray(".scroll-section"); gsap.set(panels, { zIndex: (i, target, targets) => targets.length - i }); function sizePanels() { var heightSoFar = 0; panels.forEach(function(panel, i) { if (i !== panels.length - 1) { gsap.to(panel, { yPercent: -101, boxShadow: "0px 0px 0px rgba(0,0,0,0)", ease: "none", scrollTrigger: { start: heightSoFar, end: heightSoFar + panel.offsetHeight, scrub: true } }); } heightSoFar += panel.offsetHeight; }); gsap.set("body", { height: heightSoFar }); } sizePanels(); I've looked through the threads on performance, but I'll admit this is my first foray into using things like the Chrome Performance auditing tools, so I'm not sure what I'm looking at to even know where to point and say "Ah, there's a potential issue"! May I get a helping hand? ?

YES! Awesome! And double yes that I'm not going crazy and/or missing something. Thankfully this site isn't launching for at least another 3 weeks, so I'll proceed and then patch when the update is released. ? THANK YOU! ?

What I am trying to do: I want to try and create a small function/snippet that I can use to control scroll-based (using ScrollTrigger) animations around the site using inline data attributes, so I can get mix up the animations, without having to have multiple functions running. I mostly just need to use X position and Delay (might expand this to some other attributes later). Where I'm stuck: The position works a treat and I can loop through the elements, grab their associated values and run the tween. The delay will not work, though. I thought maybe it's something to do with the data attribute (although I couldn't see why), so I also tried just placing a hard coded numerical value, and the delay is ignored entirely within this loop. What I've tried: I've scoured the Googlewebz and docs. I also tried the "stagger" idea, but that doesn't work inside a ForEach, but rather when you pass a group of elements as the selector. The problem with that method, though, is that I need to grab the individual data attributes so I can change the element's animation values on a per-element basis (both of which are stored as data attributes). I have the Codepen attached for your review, as well as my JS here. Open to any and all suggestions on how I can achieve this. Thank you in advance! var groupedFade = gsap.utils.toArray(".fade-group"); groupedFade.forEach(function (group) { var elements = group.querySelectorAll(".fade-group-entry"); elements.forEach(function (element) { var positionValue = parseInt(element.getAttribute("data-position")); var delayValue = parseInt(element.getAttribute("data-delay")); gsap.from(element, { scrollTrigger: { trigger: group, start: "top 90%" }, autoAlpha: 0, x: positionValue, duration: 1.5, ease: "power3.inOut", delay: delayValue }); }); });

I thought that might be the case (script is in the head), but I have my custom workflow using GULP which concatenates in the order I specify, so GSAP is assuredly getting included ahead of my tweens, and all of that gets included into a minified JS file in the footer. Also, I have another Timeline which is executing just fine! The only thing that is not working, is firing the timeline from the click trigger. If I wrap it all in document.ready (and yes, you're write I don't need jQuery for that: force of habit!), it works! But if I don't, then the click trigger does not execute the timeline. I'll keep troubleshooting and post back here if I find an answer. The fact it works in CodePen at least gives me a lead, and obviously it's something to do with the document ready state.

Update: OK, so this works in the Codepen, but not within my WordPress install, unless I wrap the entire thing in a document.ready() function: $(document).ready(function(){ var listItems = document.querySelectorAll("#menu-primary-nav li"); var navItems = gsap.timeline({ paused: true, id: "nav" }) .from(listItems, { autoAlpha:0, y:-25, duration:0.5, stagger: 0.2, delay:0, ease: "power3.inOut" } ); var navToggle = document.querySelector('.navbar-toggle'); navToggle.addEventListener('click', function (event) { navItems.play(); }); }); Why is this? I'm running jQuery 3.5.1 and it's already wrapped in: (function($){ })(jQuery); I thought document.ready(); was deprecated?

This should be so easy! I've combed the forums and Google and cannot understand why my timeline won't play when the toggle is clicked. It runs fine if it's unpaused and running on it's own, but I want this animation to occur when the user clicks the toggle (which will open a navigation panel and fade in the nav items). I'm sure it's simple...what am I missing?