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.

@akapowl I'm having the same issue. I believe it is related to the page scroll with Locomotive scroll messing up with translating the page. However, this should be possible and I found a tutorial by Greensock: https://codepen.io/GreenSock/pen/ExPdqKy I cannot get it to work though, my content keeps disappearing. Here is a minimal demo: https://codesandbox.io/s/cool-noyce-108h6c?file=/pages/index.tsx Here is also a link to the final page. At the bottom where it says “Meine Community Über Mich” you can see it disappear and reappear: https://juliaweber-git-preview-inzn.vercel.app Thanks for your help!

Hey @mvaneijgen, thanks for the swift response! I built a CodeSandbox here: https://codesandbox.io/s/xenodochial-flower-2dlzbd?file=/src/pages/index.js – hope this works! As you can see, the text get's pushed down but in a jumpy manner and the overlays some other text. It doesn't feel professional at all at the moment haha Thanks a lot!

Hey, I'm relatively new to GSAP / Scrolltrigger, but I have a demo of what I kind of would like to have here: https://art-advance-git-test-peach-inzn.vercel.app Basically, I want to have my hero video sticky until the last text box. Then, the text box should pin while the video fades out and “unsticks”. Currently, this is quite buggy and certainly not done correctly. let text = document.querySelectorAll(".text"); ScrollTrigger.create({ trigger: text[text.length - 1], pin: true, start: "top center-=" + 200, end: "+=" + 500, markers: true, }); gsap.to(".main .hero", { opacity: 0, scrollTrigger: { trigger: text[text.length - 1], start: "top center-=" + 200, end: "+=" + 500, scrub: 0.5, }, }); As you can see, the sticky part works (video is set to position: sticky) and the fading part works as well. However, the pinned text now goes over some other text (and scrolling is a bit jumpy), which is not what I want to achieve. It should stay at its position and push all following elements down until the video is gone. Apologies in advance for the amateur question, I hope someone here might point me in the right direction! Thanks

Hey @ZachSaucier, I am having a similar issue. I want to clip-path on scroll when the top of my image is in the center of the viewport and stop when it's bottom is at the bottom. I have set markers but it seems the top marker is positioned below the image container and therefore it does not work. What might cause this to happen? I've made a small codesandbox here: https://codesandbox.io/s/trusting-diffie-fv7y5l