Jump to content
Search Community

Setting state inside timeline

Robi test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

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