[Moving elements in React]

Hi, 

 

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

 

[Moving elements in React]

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!

• Lunch dev discord community 

 

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.

 

 

[Moving elements in React]

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