ScrollTrigger refresh/recalculate when any change to window height/width

[PEgaz]

Hi,

I started to play with your product when making my portfolio site in NEXT and I really love it, but ... I came across problems I cannot overcome, so ...I'm writing asking for help :)

here's stackblitz url:
https://stackblitz.com/edit/github-csjexd?file=README.md

Problems started when I was trying to figure out how to implement whole site ScrollTrigger refresh when any change to window height/width occurs.

What I did so far:

- changed all start/end properties into functions

- custom hook checking if any change in size occured (hooks/useDeviceSize) and if so - globally forced refresh in page.tsx with:

  useEffect(() => {
    () => ScrollTrigger.refresh();
  }, [width, height]);

 
- put in every scrollTrigger:

 invalidateOnRefresh: true

,   

 

Problems:

- if you start scrolling after reload and don't change window size everything work perfectly
- if you start with small width, scroll into and you make window wider - all animation are not updated (or even if tehy are they are updated badly)
- if you start with wide width, and make window narrower - so many beautifull errors please my eyes

Help, please.

regards
Piotr

 

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. You posted a Stackblitz that has a ton of files, lots of code spread out amongst them, I'm not even sure how many animations and ScrollTriggers...that's quite a lot to ask people in the community to weed through. You'll have a much better chance of identifying the problem if you spend some time isolating the issue in a simpler Stackblitz. Just a few colored <div> elements is probably all you need.

 

Rather than listing various problems, post one question focused on one piece that you're working on, like "how can I pin each section one at a time?" Keep your demo focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 😉

 

Before you know it, things will fall into place one at a time.

 

You'll get a lot more people willing to help you if you keep things simple and clear. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

I noticed you're using gsap.context() which is great! But you're combining it with gsap.matchMedia() which isn't necessary. Think of gsap.matchMedia() as a specialized gsap.context(). It uses it under the hood. So...

// bad
let ctx = gsap.context(() => {
  let mm = gsap.matchMedia();
  mm.add(...);
});
return () => ctx.revert();

// good
let mm = gsap.matchMedia();
mm.add(...);
return () => mm.revert();

 

Also, this won't do anything: 

useEffect(() => {
  () => ScrollTrigger.refresh();
}, [width, height]);

Because you're only creating a function inside that useEffect() that never gets called, so you'll never cause ScrollTrigger to refresh() like that. I assume you meant to do this?: 

useEffect(() => {
  ScrollTrigger.refresh();
}, [width, height]);

But if your goal is to cause ScrollTrigger to refresh() whenever the viewport resizes, it automatically does that anyway, so there's no need for you to do it again. 

 

I noticed you're doing various things inside of .call() functions in your timeline, so make sure you're including those in your context so that they get cleaned up when you call .revert(). Remember, the context ONLY records any GSAP animations/ScrollTriggers that are created while that context function is executed, but your call(() => {..}) functions happen later, thus they're not recorded inside the context. It's easy to add things to a context, like: 

let ctx = gsap.context(self => {
  let tl = gsap.timeline(); 
  
  tl.call(() => {
    self.add(() => {
      // your code here! Any animations/ScrollTriggers created here will get added to the ctx
    });
  });
  
});

 

Very minor thing: I'd strongly recommend using the string syntax for eases:

// old/bad
yoyoEase: Power4.easeIn

// new/good
yoyoEase: "power4.in"

I'd recommend making the above tweaks and then if you're still having trouble, please provide a much more simplified demo that isolates the issue very clearly.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. 

[PEgaz]

yes, you're right, I should have clean it a lot, I was just despered yesterday
Thank you for your answer, I will incorporate all guides you wrote and then I will try to destille the problem if there's still any.

[PEgaz]

Thank you again for all the tips, they saved my despered soul and I was sooooo happy because everything had been working ....  until I started next section.

 

Don't scream at me I put all project again but the question will be very precise:
https://stackblitz.com/edit/github-vyyho4?file=README.md
 

When I started working on ProjectSection immidately I came across a strange refresh problem. This file:

components/projectsPage/ProjectsTitle.tsx

holds component that will have small scrollTrigger animation with "PORTFOLIO" text, unfortunately any window size change, completely moves it out of site flow and shows it somewhere deeply in previous section of my site. Only hard refresh makes it come back on place.

 

I have no idea why

I did it in the same way as all previous scrollTrigger animations that worked perfectly well.

 

regards
Piotr

[GSAP Helper]

Sorry, but digging into a whole project with that many files is beyond the scope of help we can offer in these free forums. You'll have a much better chance of getting a good answer if you include:

 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo that only includes the absolutely essential code to reproduce the issue. Please don't include your whole project. The more you isolate things, the better the odds are that you'll discover exactly what the cause of the issue is.

 

I know you told us which file the problem is in, but it's not immediately apparent where that file ties into everything, what to click on or look at in the preview, etc. This is why isolating things in the most minimal demo possible is always best. 

 

If you need more assistance and can't isolate things more, we do offer paid consulting services. You can contact us if you'd like to explore those options.