norkuy Posted May 30, 2022 Share Posted May 30, 2022 I went through this example https://tympanus.net/codrops/2022/05/19/image-to-grid-transition/ from Codrops to see how Flip was implemented and appendChild is used to put the image into its last state and also noticed appendChild is used in the Flip docs. Does anyone know the react way of putting an element into a new parent container so Flip can animate it? const imageState = Flip.getState(DOM.contentItem); DOM.gridItemTarget.appendChild(DOM.contentItem); Flip.from(imageState, { duration: animationSettings.duration, ease: animationSettings.ease, }); Link to comment Share on other sites More sharing options...
PointC Posted May 30, 2022 Share Posted May 30, 2022 I don't know much about React, but there is a Flip demo in the Advanced React Guide. This thread may be useful too. Hopefully that helps. 2 Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 Also - https://medium.com/swlh/reparenting-with-react-426d12fb6d0d Link to comment Share on other sites More sharing options...
norkuy Posted May 31, 2022 Author Share Posted May 31, 2022 Thank you PointC and Cassie. I was hoping I wouldn't need to rely on another package to accomplish it but I'll try with this reparenting library. I also tried React.createPortal but my DOM node to be animated just updates to the new parent with no animation. Just to see what would happen, I used with querySelector and appendChild in React and it works although the animation seemed a bit laggy at times. I know using appendChild and querySelector in React would be a bad idea. Link to comment Share on other sites More sharing options...
norkuy Posted May 31, 2022 Author Share Posted May 31, 2022 I wonder if I moved the Flip.from animation into a useEffect that runs on initial load in the element that's being moved with a portal. I think it's possible that the element that's being moved isn't fully loaded since when I put a breakpoint when the move occurs the video element is moved but the video itself isn't painted. Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 We're not really react experts so don't take our word for it! An option - Lunch dev discord community Lots of React experts here, very friendly to beginners. Good luck with your project, keep us updated with how it's going - if you have any GSAP questions make sure to pop back in. Link to comment Share on other sites More sharing options...
ashura Posted June 28, 2023 Share Posted June 28, 2023 Having the same trouble as you @norkuy did you find it out? its kinda annoying there is no possibility I can reparent the child with the GSAP Flip because of ReactDOM. Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 28, 2023 Share Posted June 28, 2023 @ashura, do you have a minimal demo we could look at that illustrates the issue clearly in a minimal fashion? Here's a React starter template you can fork. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Rodrigo Posted June 28, 2023 Share Posted June 28, 2023 Hi, Just in case someone else comes across this thread, we created a simple example for animating Flip re-parenting with React: https://stackblitz.com/edit/vitejs-vite-bpwfpk?file=src/App.jsx Happy Tweening! 1 Link to comment Share on other sites More sharing options...
ashura Posted June 29, 2023 Share Posted June 29, 2023 Thanks I manage to do it with ScrollTrigger @Rodrigo but I'm still not satisfied with the Flip not relying in Scrolltrigger scrub, although it activates the animation of Flip but I can't do it with the scrub of scrolltrigger which is fine for me now. I'll ask for help if I can't do it...but I think its fine now. Thanks for the help master! https://codesandbox.io/s/laughing-yalow-xfrzmg 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