Jump to content
Search Community

GSAP Flip Plugin WordPress Integration

Claymore test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

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