inzn

@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