Two animations in ReactJs Hook

[prrrcl]

Hi,

 

I have some issue with Gsap and reactjs. I don't know how can i do two animations, first one, and then when it finished, start the second one.

 

Im working with hooks and this is my code: 

useEffect(() => {
    let newTimeLine = new TimelineMax()
    setAnimation(
      newTimeLine
      .staggerFrom(
        links.children,
        0.5, 
        { alpha: 0, y: -30 }
        , 0.08)
      .staggerTo(
        links.children,
        0.1,
        { alpha: 1, y: 0, ease: Power3.easeOut },
        0.1).reverse()
        )
  }, []);

I want to have second animation: x: -10 to x:0 when y: 0.

 

My english is so bad, sorry guys...

 

Thanks a lot.

[ZachSaucier]

Hello prrrcl and welcome to the forums! 

 

It's a little tough to understand what you're wanting to do not because of your English but because you didn't provide a live demo. Using something like StackBlitz to recreate your issue can really help us understand.

 

You should be able to just chain your second animation onto your first (in the same way that you chained the staggerTo to the staggerFrom). So it could look something like this:

 

useEffect(() => {
    let newTimeLine = new TimelineMax()
    setAnimation(
      newTimeLine
      .staggerFrom(
        links.children,
        0.5, 
        { alpha: 0, y: -30 }
        , 0.08)
      .staggerTo(
        links.children,
        0.1,
        { alpha: 1, y: 0, ease: Power3.easeOut },
        0.1
      )
      .reverse()
      .staggerFromTo(
        links.children,
        0.1,
        { x: -10 },
        { x: 0, ease: Power3.easeOut },
        0.1
      )
      .reverse()
    )
  }, []);

Or maybe like this, depending on the effect that you want:

 

useEffect(() => {
    let newTimeLine = new TimelineMax()
    setAnimation(
      newTimeLine
      .staggerFrom(
        links.children,
        0.5, 
        { alpha: 0, y: -30 }
        , 0.08)
      .staggerFromTo(
        links.children,
        0.1,
        { x: -10, ease: Power3.easeOut },
        { alpha: 1, y: 0, x: 0, ease: Power3.easeOut },
        0.1
      )
      .reverse()
    )
  }, []);

Check out the staggerFromTo docs if you haven't already.

[prrrcl]

oh my god, thanks a lot (L)!!!!!

[ZachSaucier]

Happy to help! Let us know if you need help with anything else