Flip elements Across the DOM with hover effects

[Web Bae]

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!

 

Keegan

 

 

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

[Rodrigo]

Hey Keegan!

 

Busy Saturday experimenting huh? Those are fun!  

 

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!

[GreenSock]

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

[Web Bae]

Beautiful.

 

Thank you both.