Jump to content
Search Community

Can't refresh scrollTrigger after layout change

AlexN test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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;
};

 

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

  • Solution

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

  • Like 2
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...