Liquid Image displacement hover effect with Three.js and Webflow
This tutorial is about creating a really cool modern displacement hover effect using three.js and implementing it in Webflow using custom code.
Content:
0:00 Intro
0:47 Webflow Layout Build
3:38 Adding Custom Code
10:47 Text Animation
14:39 Bonus Tip
⌨️ Link to Three.js library:
https://cdnjs.com/libraries/three.js
⌨️ Link to GSAP library:
https://cdnjs.com/libraries/gsap
⌨️ Link to Robin Dela Github hover-effect:
https://github.com/robin-dela/hover-e...
☕ Show your appreciation by buying me a cup of coffee! 😜
https://www.buymeacoffee.com/desluv
Here is a breakdown of my gear to make this video
💜 Try Webflow (Affiliate Link):
https://webflow.grsm.io/k6xruaam919t
🎆. Element Envato Stock image/video assets (Affiliate Link):
https://1.envato.market/9WJ0qy
🎤 Microphone to capture my voice:
HyperX QuadCast S - https://amzn.to/3DDEtW0
💻 Dock connectivity:
OWC 14-Port Thunderbolt 3 Dock - https://amzn.to/3jB6dCD
📷 Camera:
Fujifilm XT-3 - https://amzn.to/3zG6bz1
🖥 Computer
Mac Mini - https://amzn.to/3DG7hx3