Jump to content

Web Bae

Flip elements Across the DOM with hover effects

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

In my previous post Rodrigo was kind enough to help me get a working Flip animation with CSS grid: 

I'm working on a more complex example that recreates the effect seen here: https://tympanus.net/codrops/2023/04/26/image-tiles-menu-animation/


Unfortunately, when I try to add/remove the '.is-current' class which handle opacity and scale, the images jump instantly to their final positions and don't animate.


How can I combined the desired hover and Flip effects while still tracking an "active item"? The end result will have multiple images flipping from menu style layout to full style layout as in the provided example.


Thanks again pros!





See the Pen gOBxGmM by webisbae (@webisbae) on CodePen

Link to comment
Share on other sites

Hey Keegan!


Busy Saturday experimenting huh? ;) Those are fun! :D 


It seems that getting the scale in the original state is messing things up. What I managed to do is make Flip ignore that, just get the opacity in the getState method and be sure to create some conditions to prevent the mouse out event from triggering when the animation has been triggered. I made that by creating a variable that holds an ID or something like that. Also there is no need to get the state of every image, Flip can handle collections without any issue. Also I had to tinker a bit in order to fix some issues with the scale and opacity (if the hover animation wasn't completed) and the only way I found it works was using an onComplete callback.


Here is a fork of your codepen:

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


Now I'm pretty sure that there must be some different way to tackle this, but this is the one I was able to came up with.


Hopefully this helps.

Happy Tweening!

  • Like 3
Link to comment
Share on other sites

  • Solution

Yeah, you had !important CSS styles that were interfering. 


Also, you can simplify this: 

images.forEach((image) => {
  if (isEnter) {
    gsap.to(image, { opacity: 1, scale: 1 });
  } else {
    gsap.to(image, { opacity: 0, scale: 0 });

To this: 

gsap.to(images, { opacity: isEnter ? 1 : 0, scale: isEnter ? 1 : 0 });

You should also make sure to set opacity/scale to 1 right before the flip in case there's a hover animation running and things are partially-tweened. Like if you hover and then almost immediately click the button, the scale might be 0.5 at that point which could contaminate the final state you're flipping to. So do a gsap.set() with overwrite: true to make sure that other tween is killed too. 


If you click back and forth between the trigger and reverse buttons in @Rodrigo's demo, you'll see some odd behavior because of that. 


See the Pen dygzdPE?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 4
Link to comment
Share on other sites



Thank you both.

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.