GSAP Flip Plugin WordPress Integration

[Claymore]

Hi there!

I'm trying to build a WordPress website which has a effect like this: https://artemsemkin.com/rhye/wp/slider-8-circle-covers-v/
If you click on "explore project" the image will expand so that there is a seamless animation into the new portfolio page. After using GSAP from time to time, I came across the Flip Plugin and it looks like that you can achieve a similar effect using this plugin (GSAP Demo Pen below).

 

Since I am using the non-headless WordPress the DOM will change completely switching the pages. So I guess I need the portfolio detail page to be dynamically loaded with for example AJAX in order to make it work with the Flip Plugin, is that correct? I've also read a lot about Barba JS which could help me to achieve it, too (it looks like the author from the WordPress-Theme is using this as well).

Is there anyone who build something like this on his own or can tell me briefly what steps need to be taken in order to achieve the animation? Would the Flip Plugin be a good choice here?

 

It looks like my question may not be directly related to GSAP, so I hope you don't mind me asking. Thanks in advance!

See the Pen JjXqMZK by GreenSock (@GreenSock) on CodePen

[GreenSock]

Sure, it seems like Flip may be a great help in something like that. As for how to build it all, you're welcome to post in the "Jobs & Freelance" forum to seek paid consulting. As long as you Flip.getState() on the element that's exiting, you should be able to feed that into a Flip.from() for the new element after it loads. But yeah, you'd probably need to load things in dynamically so that you avoid the entire page refresh that could make things disappear for a bit. 

 

Good luck!