[Spacing out overlapping items on hover help]

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!

[Spacing out overlapping items on hover help]

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