wobble picture movent on hover

[archimedo]

Hi everyone,

 

I'm quite new to GSAP but I saw some examples of its use and I'd like to learn how to use it.

At the moment I'm designing a website where I have several products with picture and description, and I'd like to give a wobble effect on the image when I hover the mouse. This is basically the effect I'm looking for

 

Actually I inspected the code of that page to understand a bit more how to achieve something like that and I found out that the effect was made with GSAP itself, so I wanted to ask you: to get that kind of effect are there any GSAP function where I have to tweak their option or is something  that needs a bit more of customization?

 

Thank you very much!

[ZachSaucier]

Hey archimedo and welcome to the GreenSock forums.

 

That effect is made using WebGL and some shaders. It's non-trivial for people just learning about WebGL  GSAP is indeed used on the page for various animations but GSAP doesn't have any plugins or anything like that to make that sort of effect any easier (though it can handle the animation of the values for you perfectly well).

 

You could do something similar with SVG or Canvas which has been discussed more in these forums. But you likely can't get the exact same effect without using WebGL (at least very performantly).