inzn Posted February 26, 2023 Share Posted February 26, 2023 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 Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 26, 2023 Share Posted February 26, 2023 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
inzn Posted February 26, 2023 Author Share Posted February 26, 2023 Here is a CodeSandbox of the whole thing: Fullscreen: https://siuqo3-3000.preview.csb.app/, Code Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 27, 2023 Share Posted February 27, 2023 @inzn your Codesandbox is in read only, so nobody can jump in now and help. Personally when I know I want one continues animation to play over a scroll distance I create a timeline and within that time line the ScrollTrigger logic and then add each animation to that timeline. This way I can easily remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. If you do however still want to use single GSAP tweens with all their own ScrollTriggers, enable the markers to see when the triggers are happening, to get a better understanding where it is overlapping. What I'm thinking right now is that the order of creating ScrollTrigger is important in which order you create them, because if they change height the others need to know that is happening. In that case you can call ScrollTrigger.refresh(); when they are done loading to have them recalculate their positions. Hope it helps and happy tweening! 1 Link to comment Share on other sites More sharing options...
inzn Posted February 27, 2023 Author Share Posted February 27, 2023 @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 1 Link to comment Share on other sites More sharing options...
Cassie Posted February 27, 2023 Share Posted February 27, 2023 I can't access this at all I'm afraid. Quote you can clearly see how the manifestoQuoteSection that happens after manifestoSlider is disregarding the sliders height/padding. As Mvaneijgen mentioned though, this sounds like a creation order thing. Maybe set a refreshPriority on each trigger and then call refresh() refreshPriority number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted February 27, 2023 Share Posted February 27, 2023 I can't view the CodeSandbox either, but I noticed you're using React so I wonder if you're just not doing proper cleanup and React is calling your useLayoutEffect()/useEffect() multiple times and inadvertently creating multiple conflicting animations/ScrollTriggers. gsap.context() is your new best friend in React. I would strongly recommend reading this: And make sure you're doing proper cleanup. If you still need help, we'd be happy to peek at a minimal demo in CodeSandbox or [even better] Stackblitz. Here's a starter template you can fork: https://stackblitz.com/edit/react-cxv92j Link to comment Share on other sites More sharing options...
inzn Posted February 27, 2023 Author Share Posted February 27, 2023 @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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted February 27, 2023 Solution Share Posted February 27, 2023 Yep, @mvaneijgen's and @Cassie's instincts were right. You created your ScrollTriggers out of order, so you've gotta use refreshPriority or in this case since things are spaced out adequately to have their start positions still end up in the right sequence, you can just call ScrollTrigger.sort() and it'll use those to determine priority levels: https://stackblitz.com/edit/nextjs-pdnd1d?file=pages%2Findex.js Does that clear things up? Link to comment Share on other sites More sharing options...
inzn Posted February 28, 2023 Author Share Posted February 28, 2023 @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 Link to comment Share on other sites More sharing options...
GreenSock Posted February 28, 2023 Share Posted February 28, 2023 Yeah, that's more of a logic thing. You'd have to set the refreshPriority accordingly. One "hacky" way is actually commented out in my demo I shared - I set refreshPriority to 10 - i in the loop, and then set the refreshPriority on the one you create later (which is after the 2nd thing in the loop) to be 8.5 so that it's between the 2nd and 3rd one in your loop. I'm sure there are other ways you could structure your code to make it a little more dynamic, but hopefully you get the idea. Cheers! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now