Jump to content

Pieter Biesemans

  • Posts

  • Joined

  • Last visited

About Pieter Biesemans

  • Birthday January 11

Profile Information

  • Gender
  • Location

Pieter Biesemans's Achievements

  1. 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
  2. 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.
  3. 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?
  4. 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. 😀
  5. 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?
  6. 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 😅
  7. 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.