goooon Posted October 11 Share Posted October 11 I don't understand what is wrong. The red box should be auto animated moving along the columns when the mouse enters DEMO https://stackblitz.com/edit/stackblitz-starters-tqhpvw?embed=1&file=app%2Fpage.tsx Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 11 Share Posted October 11 You are missing a step! The flip plugin always needs 3 steps Get the state as it is now Do some logic where you change the state of the element. In your case reparent the element. ❌ you're missing this 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 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted October 11 Share Posted October 11 Hi, This demo uses Flip in React with reparenting being done the react-way: https://stackblitz.com/edit/vitejs-vite-bpwfpk?file=src%2FApp.jsx Hopefully this helps Happy Tweening! Link to comment Share on other sites More sharing options...
goooon Posted October 11 Author Share Posted October 11 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 More sharing options...
Rodrigo Posted October 11 Share Posted October 11 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now