Jump to content
GreenSock

Rabeegsap

Animating using gsap.from

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>
  );
}
Link to comment
Share on other sites

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

 

 

  • Like 1
Link to comment
Share on other sites

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



 

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Thanks for the help

  • Like 1
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.
×