Jump to content
Search Community

I can't solve the simpliest React + useGSAP + FLIP

goooon test
Moderator Tag

Recommended Posts

You are missing a step! The flip plugin always needs 3 steps

  1. Get the state as it is now
  2. Do some logic where you change the state of the element. In your case reparent the element.  you're missing this
  3. Animate the state from one to two

I don't know react and it is fighting me, so I move to Codepen where I can just wright out the logic that is needed. In your case you need to remove all the other elements and work with one element that you reparent.

 

See below there is one .box, we get its state then move it to the item we want to move it to and then we animate its state from one parent to the next . Check the docs if things are still not clear https://gsap.com/docs/v3/Plugins/Flip/#how-does-flip-work

 

Hope it helps and happy tweening! 

 

See the Pen MWNJWGE?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

Thanks for your anwser. But in fact I do the logic to change the box. Is conditional rendered in each column. So the ref={cosito} moves from one column to another. I don't underastad :/ 
 

     {activeCol === 1 && (
              <div ref={cosito} className={styles.cosito}></div>
     )}
Link to comment
Share on other sites

You might be looking for the targets property in the Flip Plugin config:

https://gsap.com/docs/v3/Plugins/Flip/#targets

 

As shown in the demo I posted before:

const handleClick = () => {
  flipState.current = Flip.getState(childRef.current);
  setParentIndex(parentIndex === parents.length - 1 ? 0 : parentIndex + 1);
};

useGSAP(
  () => {
    if (!flipState.current) return;
    Flip.from(flipState.current, {
      duration: 1,
      // Tell Flip the targets to use for the animation
      targets: [childRef.current],
    });
  },
  {
    dependencies: [parentIndex],
  }
);

useEffect(() => {
  guides.current = gsap.utils.toArray('.guide', container.current);
}, []);

Keep in mind that a re-render in these type of frameworks mean that the DOM elements are not the same, especially the one being reparented, that is a completely different element than the one that was captured by the getState() method.

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.
×
×
  • Create New...