Spacing out overlapping items on hover help

[aileen-r]

Hi there,

 

I'm really new to GSAP so please excuse any rookie mistakes.

 

I have a row of slightly overlapping elements. On hover, I want one element to grow slightly and push its neighbours away.

 

It's nearly right, but I've noticed a couple of things.

 

1. The first time I hover over an item, the animation is slower and a bit stuttery

I tried to capture this in a screen grab. When I hover over the same item again, the animation is snappy.

https://pasteboard.co/xEI77Yj1qqlL.gif

 

I'm using transform: scale, not width/height so I thought it would be smooth.

 

2. When I mouseout of one item and mouseover the next, the width of the row bounces

I would prefer for the row's width to stay at its max, and for only the mouseout and mouseover elements to move. Then when I move my mouse out of the row entirely, the width of the row would contract.

 

This one is less GSAP-specific and more implementation, I know, but I would appreciate any pointers.

 

Thanks!

See the Pen oNMBxPm by aileen-r (@aileen-r) on CodePen

[Rodrigo]

Hi @aileen-r and welcome to the GreenSock forums!

 

The reason for the different speed is beacuse you're setting the timescale of each animation on the mouse leave event to be 2 and is never reset to 1, that's why is faster after the first mouse over event. If you want to keep the same speed on both events just remove that and make the duration of the animation half the current time:

reactions.forEach(reaction => {

  const action = gsap.to(
    reaction,
    {
      scale: 1.2, 
      margin: '0 30px 0 20px',
      duration: 0.25, 
      ease: 'power2.inOut', 
      overwrite: 'true', 
      paused: true
    }
  );

  reaction.addEventListener("mouseenter", function() {
    action.play(0);
  });
  reaction.addEventListener("mouseleave", function() {
    action.reverse();
  });

});

Now if you still want the leave animation to be faster, then keep the timescale setter on the mouse leave, but add one to the mouse enter as well:

reactions.forEach(reaction => {

  const action = gsap.to(
    reaction,
    {
      scale: 1.2, 
      margin: '0 30px 0 20px',
      duration: 0.25, 
      ease: 'power2.inOut', 
      overwrite: 'true', 
      paused: true
    }
  );

  reaction.addEventListener("mouseenter", function() {
    action.timeScale(1).play(0);
  });
  reaction.addEventListener("mouseleave", function() {
    action.timeScale(2).reverse();
  });

});

You can learn more about timeScale here:

https://greensock.com/docs/v3/GSAP/Tween/timeScale()

 

Finally if you want to prevent the bounce effect in the reactions container, that's a bit more tricky since you need to get the current active element check in the array, see if there are elements before and move all those a specific amount of pixels and do the same for the elements after the active one. Finally when leaving the reactions container tween all the reactions back to their original x position. Avoid using margins for this if you can for that scenario. But I must say as a user I would be totally fine with the way things are, just speed up the animation and keep the timescale, no need to change it IMHO.

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[aileen-r]

Thank you @Rodrigo, for the solution and quick response.

 

This seems really obvious in hindsight, so lesson learned about copy/pasting an animation and not reading the code critically. The animation is much snappier now.

 

As for the bounce effect, this sounds like a more challenging problem. Your initial pointers are very much appreciated. I'll post an update if I get anywhere with it.

 

Thanks again!