Picture Is Shaking As It Grows

[AliDemir]

Hi everyone,
I recently wanted to make an animation that I saw on the dribbble site with gsap.
This is the design: https://dribbble.com/shots/17395973-Interactive-Project-Index

 

The idea that came to my mind was as follows, for each picture I add a picture to the background of a div, then another div inside and the background of that div is the same picture. Then I add the texts, when I hover over the picture with the mouse, I enlarge the picture inside, and when I enlarge, I slide it up a little so it seems to grow in the middle.

 

But the picture is shaking as it grows and it's annoying.

See the Pen LYeojbR by myFree-1 (@myFree-1) on CodePen

[OSUblake]

Welcome to the forums @AliDemir

 

I'm not seeing any shaking, but even if it is, it's nothing GSAP is doing. GSAP is just changing the property. The browser is doing the rendering. Animating a transform property like scale instead of a layout properties like height can result in smoother animations, but it might require some creativity to look right.

 

[AliDemir]

Thanks,

 

I guess because the background position is set to "center center" there are minor shifts when I resize (I think). I tried scaleY but it doesn't look very good as it stretches the picture. (I've slowed down the animation speed a bit to make the flicker appear in case you're not paying attention.)

 

I will try other things.

[AliDemir]

I created a solution with clip-path.

 

See the Pen jOYoedM by myFree-1 (@myFree-1) on CodePen