Ever wondered how award-winning websites create those mind-blowing hover animations? In this video, we’ll recreate a stunning hover effect from an award-winning website using Webflow’s interactions—no extra code needed (well, just 12 lines 😉).
This tutorial will walk you through step by step, covering:
✅ How to set up a dynamic CMS-driven hover animation in Webflow
✅ The power of Webflow interactions to create smooth animations
✅ How to achieve complex hover effects without custom code
✅ When and why to add minimal JavaScript for advanced effects
✅ Best practices for structuring interactions in Webflow
This effect mimics the high-end animations seen on websites featured on Awwwards and CSS Design Awards. We’ll break down the logic behind the interaction, tweak the layout, optimize performance, and fine-tune details to get it as close as possible to the original.
📂 Helpful Resources:
- Supasaito Academy: https://academy.supasaito.com/en
- Link to the cloneable: https://webflow.com/made-in-webflow/website/award-winning-website-hover-animation
- Link to the award-winning website: https://www.henriheymans.com/
🔥 If you liked the video, feel free to leave a comment, hit the like button, and subscribe to my channel. 😁
---
My Webflow public profile:
https://webflow.com/@francescocastro
We can talk on LinkedIn:
https://www.linkedin.com/in/francescocastronuovo/
Or we can get to know each other on X:
https://x.com/francescoflow
Or why not? Even on Instagram:
https://www.instagram.com/francescocastronuovo
---
0:00 Intro
1:01 Building the layout | Part #1
3:54 Building the CMS collection
6:59 Building the layout | Part #2
17:37 Building the hover animation (No-code) | The wrong way
21:00 Building the hover animation (No-code) | The right way
28:40 Building the layout | Part #3
29:38 Building the hover animation (No-code) | Image scaling
32:27 Enhancing the hover animation (JavaScript)
49:37 Outro
#webflow #madeinwebflow #nocode #javascript #webflowtutorial