Animating using gsap.from

[Rabeegsap]

Hi,

 

I used to set the CSS for the elements then use gsap.from to animate them from a position A to their default position in the CSS.

using margin for relative elements and left or right for absolute ones.

Now gsap.from is not animating elements properly 

 

Please help,

See the Pen MWVJbXJ by rabeexxxx (@rabeexxxx) on CodePen

[mvaneijgen]

Hi @Rabeegsap welcome to the forum!

 

I removed the React logic around your GSAP code and as you can see the code you've written works perfectly when animating the H1. As a general rule  I would stay away from animating `margin` or `left`/`right`,  it is better to animate `x` and `y`, these are more performant  

 

See the Pen ZExLKBO?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

 

There is probably something missing in your local setup. I recommend taking a look at the React setup Greensock as created on CodeSandbox to check how to set it up and if you still have an issue share a Codesandbox with your not working code.

[Cassie]

Using React

See the Pen MWVJbXJ?editors=1010 by rabeexxxx (@rabeexxxx) on CodePen

Getting started article here - 

And a solution for an issue with from tweens if you're using react 18 and strict mode. It doesn't look like that's your issue here though!

 

 

Good luck!

[GreenSock]

Here's a demo illustrating the React 18 double-call-in-strict-mode issue: 

See the Pen abYBGEZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

And here is a solution: 

See the Pen QWmdvzN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

There's another [even better] solution coming in the next release of GSAP. Stand by for that

[Rabeegsap]

12 hours ago, mvaneijgen said:

Hi @Rabeegsap welcome to the forum!

 

I removed the React logic around your GSAP code and as you can see the code you've written works perfectly when animating the H1. As a general rule  I would stay away from animating `margin` or `left`/`right`,  it is better to animate `x` and `y`, these are more performant  

 

 

 

 

There is probably something missing in your local setup. I recommend taking a look at the React setup Greensock as created on CodeSandbox to check how to set it up and if you still have an issue share a Codesandbox with your not working code.

Actually, I just created a react app then npm i gsap , I am not sure what is going on its just a simple code.

[Rabeegsap]

11 minutes ago, Rabeegsap said:

Actually, I just created a react app then npm i gsap , I am not sure what is going on its just a simple code.

gsap.to works fine, my issue with gsap.from

If I call gsap.from using a button, it works fine but if it is inside useEffect then it will not work

this code below not working:

  useEffect(() => {

    gsap.from(".h1", { x: -2500,duration:1 });

  });

 

this one works fine:

function App() {

  const clicked = () => {

    gsap.from(".h1", { x: -2500,duration:1 });

  };

  useEffect(() => {

  });

  return (

    <div className="App">

      <h1 className="h1">Hello</h1>

      <h1 className="x500">X=500</h1>

      <button className="btn" onClick={() => clicked()}>

        click me

      </button>

    </div>

  );

}

[Cassie]

Hi there - Please give the thread a proper glance over! There were two solutions provided.

one in the thread I linked to -
 

useLayoutEffect(() => {
    let from = gsap.from(elem0.current, {
      rotation: 360,
      immediateRender: false
    });

    return () => {
      from.kill();
    };
  });

And another from Jack -
 

Quote

And here is a solution: 

See the Pen QWmdvzN?editors=0010 by GreenSock (@GreenSock) on CodePen

Along with a thread explaining why...
 

And a demo showing the issue -
 

Quote

Here's a demo illustrating the React 18 double-call-in-strict-mode issue: 

See the Pen abYBGEZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

[Cassie]

The reason you didn't immediately get help for the react issue is that the demo you provided wasn't actually a working demo.

 

The HTML was being drawn from the HTML panel, not being injected by React and your React code wasn't actually running at all.

Here - I deleted the markup from your demo to demonstrate

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

 

[Cassie]

As Jack said too - there's a new (better) fix coming in the next version. 🥳

Apologies for the speedbump. The React double call behaviour's tripped up a lot of people. It's quite a frustrating one!

[Rabeegsap]

Thanks for the help