.from() working on codesandbox but not on my local environment

[Brian Mwangi]

I'm using React and I'm using gsap for my animations but gsap.from() does not work correctly in my local environment.
I'm using the same code both on my local environment and codesandbox. Both environments have the same dependencies(same version of react and gsap). The code works fine on codesandbox but not on my local environment. What could be the issue?
Here is the code:
 

useLayoutEffect(() => {
   let from = gsap.from(ref.current, {
       xPercent: 100,
       ease: 'expo',
       duration: 2,
       immediateRender: false,
    });
    return () => {
       from.kill();
    }
})
        

And here is the svg that I want to move:
 

<svg viewBox="0 0 100 100" >
   <rect
      ref={ref}
      x="0"
      y="0"
      width="100%"
      height="100%"
      fill="green"

    />
                  
 </svg>

In the local environment the <rect /> just moves slightly(and it's different every time) instead of all the way

[Rodrigo]

Hi @Brian Mwangi and welcome to the GreenSock forums!

 

I  think the issue is related to React's Strict Mode, but fear not! because GSAP's Context is here to help. In this particular case context helps you clear the inline styles in a from instance during re-renders and also allows developers to create less refs thanks to the scope parameter.

 

Here is a live sample in codepen:

See the Pen PoeKbKV by GreenSock (@GreenSock) on CodePen

 

And here in codesandbox:

https://codesandbox.io/s/gsap-from-animation-with-react-cpyuzg

 

Finally be sure to use GSAP version 3.11 (current version) in order to use context.

 

Happy Tweening!!!

[Brian Mwangi]

So this is the ideal way to write tweens in React 18..

[Brian Mwangi]

How would you explain the difference in environment? i.e the code working on codesandbox but not on my local environment. They all use React 18.2.0

[Rodrigo]

Yeah that's more related to the way codesandbox works probably. You could try how it works on Stackblitz and see if there is any difference. Stackblitz uses Vite.

 

Keep in mind that those online tools have a bunch on functionality and stuff coming from iframes and such, so you'll never get the exact same outcome on every single projects. Most of the time you'll get the same result, but in some occasions you'll get something different. The best test you can make is create a production build on your local machine and run it through a server there, something most building tools allow you to do.

 

1 hour ago, Brian Mwangi said:

So this is the ideal way to write tweens in React 18.

Yeah, ideally try to use context as much as possible since it'll simplify a lot of stuff and will make your life super easy come cleanup time. In that way if you don't need a ref for your timeline, meaning if you're only creating and running a timeline on the useEffect/useLayoutEffect hook, there is no need for that timeline to have a ref. If you're playing/pausing/reversing etc. your tween/timeline in different places in your app, then it's a good idea to store it/them in refs.

 

Finally an update for the react articles is coming, so when they're ready I'll post back in this thread so you get a notification about it.

 

Happy Tweening!!!

[Brian Mwangi]

Alright, thanks very much. I'll be waiting for the articles🙂

[GreenSock]

I'm not a React guy, but my understanding is that React 18 runs in strict mode only in dev mode (locally) by default. That may explain why you're seeing different results. Like Rodrigo said, gsap.context() will be your best friend when it comes to working in React. It solves various React-related challenges.