Jump to content
Search Community

Luis Pizarro

Members

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Posts posted by Luis Pizarro

    2 animations on same page, second one loading first causing issues.

    in GSAP

    Posted 

    I was trying to implement this workaround on our real project but have some other questions
The timeline has:

.addLabel()
.fromTo()
.call()

Those are throwing me errors when using ScrollTrigger.create(), so are this functions available on the .create()?

Just in case there is no way, I was looking into the beta version but on npm https://www.npmjs.com/package/gsap I dont see the 3.6.0 beta,
is it a way to include it on my project?

    image.png

    2 animations on same page, second one loading first causing issues.

    in GSAP

    Posted

    I have 2 components on the same page using ScrollTrigger.matchMedia().
    The problem is that sometimes the second component loads first than the first one, so the animation of the second one is messed up, it doesnt take into consideration that it has above it other animation component.

     

    On the stackblitz example I added a timeout just to simulate the issue, on real life it is that we are loading assets and the first one is loading slower than the first one. 

    I tried using refresh() but didnt work.

     

    https://stackblitz.com/edit/react-3ir25l?file=src/Component2.js

    Import A custom hooks breaks animations, setState inside hook

    in GSAP

    Posted

    Guys I find the issue, thanks a lot mentioning that something might be causing a re-render make me focos on that.

    On the component cleanup, we were calling  timeline.scrollTrigger.disable();

    useEffect(() => {
    console.log("mount1");
    return () => {
    timeline.scrollTrigger.disable();
    console.log("unmount1");
    };
    },[]);

    But on the useEffect we miss the [], so the component was mounting, unmounting, mounting. Causing that disable to run.

     

    Also I had to run it on serverside, without that it keeps saying  DOMException: Failed to execute 'insertBefore' on 'Node':....

    Import A custom hooks breaks animations, setState inside hook

    in GSAP

    Posted

    Now that you mention the rerender, I'll take a look. For now I tried with this demo https://react-3ir25l.stackblitz.io but the issue is not happening here, at least with the demo I ant to know if this is a correct way to handle the timeline?. Because that might be an issue too, I have a timeline on each component. Something else that might be important is that I'm using Next.js rendering on server side might cause issues? I use next/dynamic to render them on client side but not sure if either option affects or not.

     

     

    Actually sometimes I get this error  DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

    Import A custom hooks breaks animations, setState inside hook

    in GSAP

    Posted

    I have 2 components with scroll animations using the gasp scrollTrigger for react.

    In one of the components I called a custom hook that setState just the window width, height(not a too complex hook) on useEffect

    I notice that is the issue with the animation, because I remove the import of that hook, or even I remove the set state  in the hook and it works fine.

    Any suggestions on why this is happening?

    Bad

    https://drive.google.com/file/d/1WZ7MdUXjqDFct39wLLcJOI1RAuI2lhfi/view?usp=sharing

    Good
    https://drive.google.com/file/d/14i6B-AxWRT64WlyO0mSUIkVI3hhlcobw/view?usp=sharing

     

×
×
  • Create New...