Can't refresh scrollTrigger after layout change

[AlexN 1 Likes (Newbie)]

Hello Superheroes,

I need your help with my problem. I have next React hook, which kinda work as expected.

But I feel it could be optimized. And I have a problem to update ScrollTrigger  in another component after 

layout change. Could you give me an idea what could be wrong here... Thank you

 

const useCollapsible = ({ isCollapsed, duration = 0.5, delay = 0 }: Props) => {
  const ref = React.useRef(null);

  const openState = {
    height: 'auto',
    duration,
  };

  const closedState = {
    duration,
    delay,
    height: 0,
    overflow: 'hidden',
  };

  React.useEffect(() => {
    if (isCollapsed) {
      gsap.to(ref.current, closedState);
    } else {
      gsap.to(ref.current, openState);
    }
    ScrollTrigger.refresh(true);
  }, [isCollapsed]);

  return ref;
};

 

[GreenSock 18,566 Likes (Superhero)]

Paging @Rodrigo (our resident React expert)

 

I don't see any ScrollTrigger code, though, except that .refresh() call. I'm curious why you're doing that. It's always best if you provide a minimal demo (maybe a codesandbox?) because it's tough to troubleshoot based purely on a small blurb of JS. 

[AlexN 1 Likes (Newbie)]

10 hours ago, GreenSock said:

Paging @Rodrigo (our resident React expert)

 

I don't see any ScrollTrigger code, though, except that .refresh() call. I'm curious why you're doing that. It's always best if you provide a minimal demo (maybe a codesandbox?) because it's tough to troubleshoot based purely on a small blurb of JS. 

 

Best support ever! Thank you for quick response!

 

Link to sandbox with the problem: https://codesandbox.io/s/goofy-johnson-r7cgc

 

The solution could be wait until useCollapse animation will finish using delaydCall and then refresh scrollTrigger. But it feels as a hack...

[Rodrigo 5,380 Likes (Superhero)]

Hi,

 

You should update your ScrollTrigger instances, once the collapse animation is completed, not when the state that triggers such animation has changed:

const openState = {
  height: "auto",
  duration,
  onComplete() {
    ScrollTrigger.refresh(true);
  }
};

const closedState = {
  duration,
  delay,
  height: 0,
  overflow: "hidden",
  onComplete() {
    ScrollTrigger.refresh(true);
  }
};

React.useEffect(() => {
  if (isCollapsed) {
    gsap.to(ref.current, closedState);
  } else {
    gsap.to(ref.current, openState);
  }
}, [isCollapsed]);

Happy Tweening!!!

[AlexN 1 Likes (Newbie)]

Wow! Did know we can do like this! Thank you!