inzn

Hey @Cassie, thanks a lot for the helpful and insightful response! I went with your suggestion to avoid nested pinning and wrote some (GSAP unrelated) logic to remove the section from my components if index = 0. Regarding my second question, I noticed that my code always does ScrollTrigger.refresh(); ScrollTrigger.sort(); but when I reverse this to ScrollTrigger.sort(); ScrollTrigger.refresh(); it seems to be working as expected.

I'm working on a page that has a intro which should go up, while the rest of the page stays pinned. So far so good. The pinned page has some ScrollTrigger animations though, which obviously don't work (because of it's pin I guess – without pinning it works). Demo here: https://codesandbox.io/p/sandbox/fancy-architecture-ddz5cn?file=%2Fcomponents%2Fabout.tsx%3A44%2C1 I'm wondering what a potential solution could be to this? Probably a rookie mistake, but so far none of the other forum solutions have helped. And then the follow up question: When I split everything up in multiple components as I did now, how can I make sure ScrollTrigger refreshes and shows all the animations in the correct order etc. I now have ScrollTrigger.sort() and .refresh() in all the components, but I noticed that sometimes the spacing is not correct and some animations overlap. Is there a way to have a “final” ScrollTrigger.sort() and .refresh() in the parent component once all children are loaded? Thanks in advance!

@mvaneijgen super helpful as always! tysm!

Minimal Demo here: https://stackblitz.com/edit/stackblitz-starters-bg5bww?file=pages%2Findex.js I have so far manage to make most of what I want work – though undoubtedly not very efficiently. My goal is do to the following: 1. The indicators should start from width: 0 and go to width: '100%' for each section separately. (Works) 2. The divs should fade it or show up once I have scrolled far enough. Currently they fade in because I don't know how to set them straight to opacity: 1. Div1 is visible from the start, Div2 after scrolling 100vh, Div3 after 200vh and so on. (Works) 3. After I have scrolled through all of these sections (300vh), the container should scale down to 0.95 and also get a border-radius. (Doesn’t work) I'm having a bit of trouble with this, since the sections are absolute positioned and I don't really know how Scrolltrigger works with scrolling values. So all the code I already have is pretty much from reading these forums. Maybe somebody can help me out – thanks in advance already!

@GreenSock Thanks a lot, this worked wonders! Great to know that there’s already a sorting function inside of ScrollTrigger! I’d be curious to know how the correct order of my ScrollTriggers would look like without the sorting, so I won’t make the same mistake again, but I assume we don’t really have capacities for that

@Cassie @GreenSock Thanks to the both of you! I made a Stackblitz now! https://stackblitz.com/edit/nextjs-uppiki?file=pages/index.js Hoping this works and will help solve the whole thing! If you run it in fullscreen mode, you should see what (doesn't) work

@mvaneijgen Thanks for your response! I'm unfortunately not sure where to change the sharing settings in Codesandbox, but forking it should work? I tried adding a ScrollTrigger.refresh(); to the end of my useLayoutEffect, but that didn't help unfortunately. Regarding your suggestion, I'm not sure how it works because I have different triggers (.manifestoQuoteSection and .manifestoSlider). I did add markers to my sandbox and you can clearly see how the manifestoQuoteSection that happens after manifestoSlider is disregarding the sliders height/padding. https://codesandbox.io/p/sandbox/nifty-grass-siuqo3?file=/pages/index.tsx&selection=%5B%7B%22endColumn%22:1,%22endLineNumber%22:7,%22startColumn%22:1,%22startLineNumber%22:7%7D%5D

Here is a CodeSandbox of the whole thing: Fullscreen: https://siuqo3-3000.preview.csb.app/, Code

I have a timeline that looks like this: const quotes = gsap.utils.toArray<HTMLElement>('.manifestoQuoteSection'); quotes.forEach(quote => { gsap.to(quote.querySelectorAll("span"), { opacity: 0, stagger: { amount: 1.5, ease: "power2.inOut", from: "random", }, scrollTrigger: { trigger: quote, start: "top top", scrub: 1, pin: true, anticipatePin: 1 } }); There are 4 quote elements with text where I'd like the words to fade out randomly and the container should stay pinned. This works so far! Then, I have another container, a horizontal image one with the following tween: gsap.to(".manifestoSliderInner", { x: -manifestoSliderContainer.current!.scrollWidth + window.innerWidth, scrollTrigger: { trigger: ".manifestoSlider", start: "top top", end: "+=" + (manifestoSliderContainer.current!.scrollWidth - window.innerWidth), scrub: 1, pin: true, anticipatePin: 1 } }); It scrolls from right to left until the end is reached – this also works. Now, I want to combine these two things: – Quote – Quote – Horizontal Image Slider – Quote – Quote This, however, results in some strange overlays of the content (see image). I assume because the two animations overlay and don't take the pin amount into account? Here is a CodeSandbox of the whole thing: Fullscreen: https://siuqo3-3000.preview.csb.app/, Code

@GreenSock Exactly what I was looking for! Thank you so much – immensely appreciated!! ❤️

Hey @GreenSock, thanks for your response! I'm a little confused by your demo because for me nothing is happening. Maybe I should have clarified a bit better. When we get to the quotes, I want them to move horizontally until the end of the container before further moving down on the page (see below). In my demo, the do move right to left but disappear at start and reappear after end. In your demo, the start marker appears to be fixed as well and therefore does not have any effect on my animation.

@GreenSock my content is disappearing: https://codesandbox.io/s/cool-noyce-108h6c?file=/pages/index.tsx I believe this is due to locomotive scroll messing with page scroll (translation) and therefore position: fixed of ScrollTrigger's pin does not work.

Hey @aroca, have you ever found a solution for this?

Unfortunately, this brings me back to square one with everything disappearing at start and reappearing at end (due to Locomotive Scroll’s page translation). Bummer, thought someone had a fix for this for sure. Thank you though!

Hey @Rodrigo, first of all thanks for the swift and helpful reply! It does work indeed and I updated the CodeSandbox. I do, however, now encounter the error that the quotes segment is not pinned, while the wrapper is. I tried setting the pin to ".quotes" with no effect.