Jump to content
Search Community

Tween intersecting Timeline overlaps elements

inzn test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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?

 

Screenshot 2023-02-26 at 5.00.55 PM.png

Here is a CodeSandbox of the whole thing:

Fullscreen: https://siuqo3-3000.preview.csb.app/Code

Link to comment
Share on other sites

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

@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! 

  • Like 1
Link to comment
Share on other sites

@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

  • Like 1
Link to comment
Share on other sites

image.png


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.

 

  • Like 1
Link to comment
Share on other sites

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

  • Solution

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

@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

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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...