Jump to content
GreenSock

Shuriken

Moving elements in React

Recommended Posts

Hi everyone,

 

First of all, no need to tell you that the library is just amazing.

 

I just discovered it and was going through the examples.

I viewed the vido about the FLIP plugin and I have a question regarding the implementation in React.
in Js, it is pretty simple to move element through the dom but i tried to make something similar in React and to be honest, I have no idea on how to move a component from 1 div to another.

 

What I tried is to put the components 2 imes  in the code and use a toggle state to show it in one place and remove it in the other but the Flip do not work.
I suppose that GSAP consider that they are 2 different components 

 

Any guidelines on how to use Flip with React ? 
In all the samples that I have seen, the elements are moved within a common parent and it works just well

 

For example, how to convert the flip example in this codepen to React?

 

Thanks a lot for your advices.

Best regards.

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

  • Like 1
Link to comment
Share on other sites

Hey there!

 

We have a Flip demo with react here 

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


 

And also some tutorial articles here and here

 

1 hour ago, Shuriken said:

in Js, it is pretty simple to move element through the dom but i tried to make something similar in React and to be honest, I have no idea on how to move a component from 1 div to another.

We're happy to answer GSAP-specific questions, but if you're struggling with how to reparent components, that just sounds like you need some React advice.

 

This is a very friendly React discord - people there may be able to help advise!

 

Hope this helps!

Link to comment
Share on other sites

React just makes animations much more complicated than they need to be, especially with Flip. For example, toggling a component doing something like this will mess up Flip because React will just recycle the same element instead of creating a new one, which will mess up Flip.

 

<div>
{active ? <MyComponent /> : null}
</div>
<div>
{!active ? null ? <MyComponent /> }
</div>

 

That's why I had to use 2 different components here. Also, fade will not work in React.

 

 

And another thread that might be helpful.

 

 

Link to comment
Share on other sites

On 4/21/2022 at 4:22 PM, Cassie said:

Hey there!

 

We have a Flip demo with react here 
 


 

 

And also some tutorial articles here and here

 

We're happy to answer GSAP-specific questions, but if you're struggling with how to reparent components, that just sounds like you need some React advice.

 

This is a very friendly React discord - people there may be able to help advise!

 

Hope this helps!

 

Hi Cassie, 

 

Thanks for the reply. I have read these docs but it do not apply in this case. 

After some reasearch, it appears that using FLip with React is not as easy as in vanillaJs because we can not control how React manage the virutal DOM.

 

On 4/21/2022 at 5:48 PM, OSUblake said:

React just makes animations much more complicated than they need to be, especially with Flip. For example, toggling a component doing something like this will mess up Flip because React will just recycle the same element instead of creating a new one, which will mess up Flip.

 

<div>
{active ? <MyComponent /> : null}
</div>
<div>
{!active ? null ? <MyComponent /> }
</div>

 

That's why I had to use 2 different components here. Also, fade will not work in React.

 

 

And another thread that might be helpful.

 

 

 

Thanks for reference.
Indeed I started by doing the same thing as you but It did not work.
As the From tween do not work as well. I must use a fromTo

 

React is great to manage complex apps but we are limited within the framework.

 

 

Link to comment
Share on other sites

3 minutes ago, Shuriken said:

As the From tween do not work as well. I must use a fromTo

 

If you're using React 18, that just a new feature that is causing those issues. We're looking at ways to fix that, but for now it is what it is. It seems like every new version of React throws some new feature into the mix that makes doing animations increasingly more complex and tedious.

 

 

Link to comment
Share on other sites

Hi, 

 

Indeed, I supposed it was the reason that is why I did not bother to fix it and moved to fromto.


 

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.
×