I found one 3d image movement effect, I need to know if we can make it using gsap.

[codechirag]

Hello wonderful community, recently I found one attractive canvas effect, Can you help me if we can make it using GSAP. 

 

URL : https://www.joebentaylor.co.uk/

 

Note: check the face movement on cursor.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Rodrigo]

Hi,

 

Honestly I have no idea how that could be done, but I would look first into THREEJS and PIXI, because most likely WebGL is used for that.

 

https://threejs.org/

 

https://pixijs.com/

 

Good luck with your project!

Happy Tweening!

[akapowl]

If you want to know how to possibly approach something like that, I would suggest having a look at this tutorial on Codrops.

https://tympanus.net/codrops/2019/02/20/how-to-create-a-fake-3d-image-effect-with-webgl/

But it looks like they are not using GSAP whatsoever.

Anyways, integrating GSAP into that will likely be the smallest part of work you'll have to do and probably the least complex.

For the latter, I suggest having a look at

https://gsap.com/docs/v3/Plugins/Observer/

But quite frankly, I also wouldn't count on much support here with achieving that yourself, as this will likely become quite the complex task overall, mostly related to logic related on how to handle three.js, and this free support forum just can't handle creating tutorials for any given effect you can find.
 

[codechirag]

Thanks guys for your response. 🙏