Jump to content
Search Community

GSAP Flip with React and appendChild

norkuy test
Moderator Tag

Recommended Posts

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

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

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

  • 1 year later...

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

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