Issue with GSAP scrollTrigger when page height is changed.

[Hideakimaru]

Hello GreenSock!💚

 

I'm a beginner in the gsap. I have an issue with the animated footer when I use the ScrollTrigger in my project.
Everything works well, before the situation when the content height is changed.

I created a small example that demonstrates this issue:  This CodeSandBox.
 

Steps to find the issue:

1. Comment out markers in the App.js.
2. Scroll to the end of the page.
3. You will see animation works great.
4. Then, you need to refresh the page and change the input to something like "1...2...3".
5. Check the footer again. You will see that animation not working.

If test this with enabled markers I see the start placed out from the page. I tried to fix that with ScrollTrigger.refresh() in the onChange, also I tried different ScrollTrigger methods. But this anyway not what I expected. The expected animation should work regardless of page size. How can I resolve this issue?

Thanks, a lot!
Hideakimaru

[Rodrigo]

Hi

 

I'm on my phone now so I can't check your demo, but based on the description this sounds more like a CSS issue. Have you tried your layout without Scrolltrigger? Basically the issue could be that there's no enough scrolling space available to trigger the animation and having the markers kind of fixes that.

 

Another option could be that you have your Scrolltrigger instances created in a different order than they appear in the screen. Maybe try to check when all the images are loaded before creating the Scrolltrigger instances or refresh them afterwards. Also you can check if the sort() method helps:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()

 

Sorry I can't be of more assistance 

Happy Tweening!

[Hideakimaru]

Hello Rodrigo,
 

Thank you for your quick response.😊

 

Quote

Also you can check if the sort() method helps

 

• The <Box /> components in the demo witch removed from the array on changing the input just need to demonstrate page behavior in which height is changing. This means that the ScrollTrigger sort() method did not help me in this situation, I guess. Because the current target for animation is the footer block.

 

Quote

Basically the issue could be that there's no enough scrolling space available to trigger the animation and having the markers kind of fixes that.

• Yes, u right because of this animated Footer of the page, which is pinned to the bottom of the page and does not have scrolling space.

Looks like the issue is because ScrollTriggers does not update their start position on the page if the content height is changing. And I trying to find the best solution to resolve this issue, because React pages every time change their size, in the todo list, the list of something, every time changing the height of the page, but in the gsap documentation I'm found the solution to reset ScrollTrigger start position on the renders only with hard add ScrollTrigger.refresh(). But I think maybe the gsap has a better method of resolving issue with ScrollTrigers position when the height of the page changes on the renders?

__________
Reminders about how to find this problem.

1.  Please, look into this demo Here.
2. Scroll to the bottom of the page and you will see an animated footer which works well.
3. Then refresh the page and add something to the input (You will remove content blocks).
4. Again check the footer, and you will see what footer animation is not working. (If you inspect this element you will see the animation which should change opacity not doing that) 

   tl.fromTo(
     footerRef.current,
     { opacity: 0 },
     { opacity: 1, duration: 5, ease: "power3" }
   );

5. Also, you could uncomment markers in the gsap.timeline() configuration and try to make everything again. (You will see the position of markers is not changing after renders).

Thank you so much!
Hideakimaru
 

 

[Rodrigo]

Hi,

 

The main issue here is that the useGSAP hook  has no dependencies, so by defaults it uses an empty dependencies array, so it runs only when the component gets mounted, which is good, since there is no need in this particular case to run it everytime the state is updated. But you do have to refresh  the ScrollTrigger instances after updating the state and that's when you can use a useGSAP hook with that isData state property and call ScrollTrigger.refresh() there,  something like this:

useGSAP(
  () => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: footerRef.current,
        start: "top bottom",
        toggleActions: "play none none reverse",
        markers: true,
      },
    });
    let ctx = gsap.context(() => {
      tl.fromTo(
        footerRef.current,
        { opacity: 0 },
        { opacity: 1, duration: 5, ease: "power3" }
      );
    }, footerRef);

    return () => {
      ctx.revert();
    };
  },
  { scope: footerRef }
);

useGSAP(
  () => {
    ScrollTrigger.refresh();
  },
  {
    dependencies: [isData],
  }
);

function handleChanges(boxId) {
  setIsData(isData.filter((d) => d.id !== boxId));
}

You can replace the second useGSAP hook with a useLayoutEffect hook, but useGSAP is just a replacement for the useEffect/useLayoutEffect hooks with cleanup in it.

 

Hopefully this helps.

Happy Tweening!

[Hideakimaru]

Hello @Rodrigo!💚

 Your solution is perfect works!🎉🎉🎉

I was so close to this solution, that I thought about ScrollTrigger.refresh()  in useGSAP() and something like this.  It was necessary to go further and transfer part of the handler logic to useGSAP(). This solution solves problems with some other React mutations too! Also, I saw the posts with the same questions. I hope this post will help someone in the future!
 

Quote

Nothing is more powerful than an idea whose time has come

Victor Hugo

If you have the will, you'll find a way...

I agree with this quote very wise and this has happened!😊

Thank you so much!!!
Hideakimaru

_______
Also, I include these examples below:
Please, do not forget to Fork if you want to change something this could help many people after you!

The version with the issue: WATCH HERE.

The Rodrigo solution to this issue: SOLUTION HERE.

Edited Monday at 10:25 PM by Hideakimaru
the examples have been added.