Hover effect with moving image

[codevelop_at]

Hi!

I found an effect on this website (https://www.florianmatthias.com/projekte). The effect that I mean is attached as a screenshot with a description. I checked the source code and can see, that it's done with the gsap library. I don't have any clue on how to search for that or what parts of gsap I need to use. Any help is very much appreciated.

 

Thanks in advance!

[Rodrigo]

Hi @codevelop_at and welcome to the GreenSock forums!

 

Indeed that can be created with GSAP using a quickTo instance:

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

However you'll have to track the mouse position relative to the list item, since the image container is on top of the list and that would prevent from the items to receive any mouse event. So you have to check the mouse position in the parent container of the list and then, based on the Y position of the mouse update the image.

 

Unfortunately this is not a super simple task and is a little beyond the help we can provide in these free forums. Of course if another user can chime in and help or offer some working example or approach, great!

 

Good luck with your project and if you have any GSAP related question, let us know.

Happy Tweening!