How to trigger setState with gsap?

[Rahul Ahire]

Hi, I'm trying to know if there's a way in which I can animate the number inside of my react state as mentioned below with gsap

const [state, setState] = useState(0);

Any suggestion on how to use the `setState` property inside of gsap.to() ?

[NickWoodward]

You want to call setState?

You could use onComplete or onStart: https://greensock.com/docs/v3/GSAP/gsap.to()?ref=15167 (halfway down, under 'special properties')

so:

gsap.to(item, {
  x: 10,
  onComplete: () => { setState(...) } 
})

Apologies if this isn't what you're after, I don't use gsap with react

[Rodrigo]

Hi,

 

Nick is right, you should use the rich callbacks system GSAP has to offer:

https://greensock.com/docs/v3/GSAP/Tween

 

Although in this case maybe using onUpdate and the Snap Plugin could be a better fit than onComplete:

https://stackblitz.com/edit/react-ukxyjf?file=src%2FApp.js

 

Let us know if you have more questions.

 

Happy Tweening!

[Rahul Ahire]

Hi @Rodrigo and @NickWoodward, sorry that I didn't mentioned the context, actually I'm the state value to change the opacity of my object inside of react three fiber. Right now I can only use setState to change the value to either 0 or 1 making it on or off. 

 

Thanks for the StackBlitz demo, that's exactly what I needed.

[Rahul Ahire]

Hi @Rodrigo

Update : One more question though, if I remove the snap property, does it cause to setState to trigger 1000's of time and will there be any performance hit.

should I set the snap to 0.1?

[Rodrigo]

Hi,

 

GSAP will call the onUpdate callback on every tick (GSAP's internal clock) which will cause the setCount method to be updated, but React will know when the new value is different from the previous and only then will trigger a re-render. GSAP ticker gets called 60 times per second but with the SnapPlugin working the value won't be different on every update.

 

In this type of situations you should definitely create the smallest possible component so re-renders affect only that component and a small portion of the DOM, something like this:

const MyCount = ({ value, duration, ease }) => {
  const [count, setCount] = useState(0);
  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      const myCountObj = { number: 0 };
      gsap.to(myCountObj, {
        duration,
        ease: ease || "none",
        number: value,
        onUpdate: () => {
          setCount([myCountObj.number]);
        },
      })
    });
    
    return () => ctx.revert();
  }, [value]);
  return (
    <div>{ count }</div>
  );
};

export default MyCount;

Re-rendering that shouldn't create a performance problem.

 

Then in your app just use it like this:

const App = () => {
  return (
    <div>
      <MyCount value={10} duration={5} />
    </div>
  );
};

 

Happy Tweening!