A website animation featuring an image distortion in a curved, using the sin function, React, React Three Fiber and Framer Motion
Source Code / Live demo:
https://blog.olivierlarose.com/tutorials/mouse-image-distortion
0:00 Intro
0:27 Project overview
0:55 Creating a basic 3D plane
3:38 Moving the plane on mouse move
10:32 Adding an easing on mouse move
14:49 Adding a basic shader
16:29 Adding an image as a texture
19:16 Curving the plane
27:40 Fixing the size of the plane
29:54 Switching the image on hover
35:22 Fade out on mouse leave
39:05 Outro
More animations: https://blog.olivierlarose.com/
Follow me on Twitter: https://twitter.com/olivierlarose_
Follow me in Instagram: https://www.instagram.com/olidevs/
Discord Channel: https://discord.com/invite/2QPNYtazQq
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion #threejs