Pieter Biesemans

Yeah, I know. I've opted to use a static because users almost never change their preference while browsing a page. As soon as they reload or navigate, the preference is respected. But your method does seem powerful, thanks for that. Oh, yes, that makes sense thinking about it. Definitely will have to look into contexts for future reference. --- And actually, I found a different solution altogether, that doesn't require setting a max-height at all. ? I gave the map a position: sticky, so it stays next to the grid while scrolling. This keeps the natural scroll, and so there's no need for anything fancy (just a good old ScrollTrigger.refresh()). This isn't how the designer designed it, but the client is happy just the same. But I learned a lot from you, as usual, so the exercise definitely hasn't been pointless.

Yes. The downside of a reduced test case: reality is oftentimes infinitely more complex. Actually I'm also using ScrollTrigger to lazy load images inside of the elements. So the real world code is even more complex ? For context, this is the code I'm using for the Animate On Scroll animations: https://gist.github.com/pieter-biesemans/bdd437d02e722d2c3bc8de61371bf85e Downside of using revert() is that it doesn't undo the gsap.set() properties. For now I'm just going with killing the tweens and removing the style attribute. $('.el').each((i,el) => { gsap.killTweensOf(el); $(el).removeAttr('style'); });

Hey Cassie Thanks for your swift response, per usual. I'm doing great, thanks for asking. As I said, the actual code is a lot more abstract, since the fade-in animations are set in a completely different script, which is loaded on page load. The animations are set through data-attributes on the elements. Much like a scroll animations library like Animate On Scroll. I can't just overwrite or reset the animations, since I don't really know what the animations _are_. I'll have to experiment, and see if I can work the swopScroller function into the animations library. I'll report back.

So I have this situation where I have a grid with elements. The elements are animated when they enter the viewport with a simple fade in. This works like a charm. Now, on user interaction (click of a button) I need to show something (a map) next to the grid, and the grid needs to have a max-height set on it. Of course, now the fade-in animations are all wrong, because we're no longer scrolling the body element. I understand why this is happening. But I can't seem to figure out a good way to solve this issue. Refresh isn't the tool for this job. I've thought about just disabling ST when enabling the max-height. But that doesn't seem to put the scroll elements back into their original state (before gsap.set). I've tried using gsap.set to set the elements to full opacity, but then the items don't animate properly when unsetting the max-height. Also, the real world code is more abstract, and the attached animation could be more than just opacity. I've thought about making the parent element (.grid) the ST parent, but that's not an option I think. Am I missing something obvious here? Or is there a way to get around this issue? Worst case, I could just leave off the enter animations on the elements, but I' rather not.

So what I ended up doing is create an array of all sections, and an array of the sections with dark backgrounds. Then I just check if the current section is in the array of dark sections, and adjust the styling accordingly. Thanks again for putting me on the right track @Cassie! https://codepen.io/pieter-biesemans/pen/bGvLKvV?editors=0010

Waw Cassie, you are so FAST! I figured I'd ask this question in the evening, so I might have an answer by tomorrow afternoon or something. ? The mix-blend-mode cheat would be great, were it not that there'll also be sections with images and different colours than black and white. I'll have a detailed look at your solution tomorrow, but it seems to work. I'm afraid my practical case will be a bit more convoluted since I have multiple classes I'll need to be watching. But the approach seems clear to me, so the rest is just tweaking.

So I have a website with sections. Some of these have a light background, some a dark. They come from a CMS, so there is no way for me to know beforehand the order of those sections. I also have an element which is fixed on the screen. Now what I would like to do is color the fixed element white when it's over a dark background, and black when it's over a white background. The Pen shows my approach thus far. It works pretty well, toggleActions really takes the brunt of the work. Except when there are multiple dark sections following each other. Then the second, third, ... animation aren't playing. Like the reverse of the previous section cancels out the play from the next. So my question: - Is this the right approach? Or is there a better way to achieve this? - If yes, is there a fix for the issue where repeated sections stop the animation from playing?

Thanks for the reply Cassie and Jack. GSAP's support is truly unbelievable. It's comforting to know that, despite all the cleverness in GSAP, sometimes we just have to rely on the 'if it looks good, nevermind the code underneath' approach. ?

So I have a banner with some content in a container, and text outside the container. The text has been rotated to read from bottom to top instead of from left to right. It contains two titles, aligned to the right. Now I want to pin the large title, while the smaller title can scroll out of view together with the rest of the banner. Reduced test case in the Codepen: If I only pin the large title, it pins the large title relative to the left. Because of the rotation. This makes sense. But I can't seem to figure out a solution for this. If I pin the transformed element, it gets pinned correctly. I can then animate out the small title, which gives the impression it just scrolls with the rest. What I tried: Adding wrappers at different places. But that doesn't seem to help. Transforming both titles separately. But then it becomes a real pain getting the text to line out to the right, positioning the smaller correctly, etc. Not fun. Tried setting pinReparent and pinType to different settings on different elements, but that just resulted in weirder and weirder behaviour. Sooooo, am I missing something obvious and is there an easy solution? Or do I just use the workaround and go on with my day?

Think of the images as paintings. They need to be laid out in a grid, so each image needs to be exactly as wide as it's cell. But no part can be cut off, it is imperative that they be shown in full. So contain (not as wide as cell) and cover (part is cut off) are both not an option. Yeah, that's what I was thinking. Was hoping someone here would be smarter than me, catch something I missed, and propose a magic fix ?

I'm running into an issue with ScrollTrigger when I'm using it for both lazy loading AND scrolling animations. Basically when I swap out the placeholder image with the actual image, the positioning gets shifted, because both images are not the same aspect-ratio. This in turn throws a spanner in ScrollTriggers work. I want/need to keep the 'natural' height of the images. That is an important part of the design. So I don't know their height beforehand and feed that into a wrapper or something. I also have to use the same placeholder everywhere, otherwise it would kinda defeat the purpose of a placeholder. I'm guessing I could call ScrollTrigger.refresh(); when each image has been lazy loaded, but that seems mighty expensive when I have several dozen images on the page. But apart from that, I'm fresh out of ideas.