Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AlexN

Can't refresh scrollTrigger after layout change

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

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. 

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

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

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