Vue Router GSAP advanced transitions

[gabs]

I have been trying to do router transitions with advanced movement of certain objects and awareness from where it have been redirected. My final goal is to get something like this https://dribbble.com/shots/7489247-Book-a-hotel-TV-experience. As you can imagine I don't have a Codepen yet. I would be grateful if you could help me.

[ZachSaucier]

Hey gabs and welcome.

 

I assume you're talking about using a React router? Most of our regulars here don't really use React but we're very good with GSAP  You should be able to plug any GSAP animation in no problem once you have the routing all done. 

The effect you link to is likely more complicated than you think though. You'll likely need to FLIP your transitions. We have a helper function to aid with that in simple cases that may help you out. But I think the hardest part will be getting access to both the before and after elements in React - React isn't set up well to play nicely with transitions like that by default. I'm sure there are some tutorials out there on achieving FLIP page transitions in React but I don't know of any off the top of my head.