Setting state inside timeline

[Robi 0 Likes (Newbie)]

Hello, 

I need to set my react state inside my timeline after first animation ends and then continue with animations:

const tl = gsap.timeline();
      tl.to(pTitle, 1.5, { x: -550 }).setNewState after previous animation.to(pTitle,1.5,{x:150})

so far I could achive it with that: 

 tl.to(pTitle, 1.5, { x: -550 }).add(
        setTimeout(() => {
          //setNewState
        }, 1500)
      ).to(pTitle, 1.5, { x: "-4%" });

is this proper way of implementing this? Or is there "smoother" way of achieving it like with delayedCall() - which is not available in timeline

[Rodrigo 5,430 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

This sample covers using GSAP callbacks to update app or component state:

 

https://stackblitz.com/edit/gsap-update-state?file=update-state.js

 

Now considering that you need to update the state midway through a GSAP timeline it might not be the best approach.  What I can recommend is to use a .call() instance in the timeline in order to use the setState() method and you can use the position parameter to define when the state will be updated. Also you can use .add(gsap.delayedCall()) if you want as well,  with a specific delay in it.

 

Happy Tweening!!!