Want to add a stunning ripple effect to your Webflow elements — and fully control it with zero custom code?
This time, I’ll show you how to recreate a liquid ripple animation using jQuery Ripples and a custom attribute-based system, so you can apply the effect wherever you want — no manual setup needed.
🔹 What you’ll learn:
✅ How to apply the ripple effect to any section, image, or div
✅ How to use overlays for perfect control and visual consistency
✅ How to create a centralized GUI to test different settings in real-time
✅ How to disable the effect on mobile and toggle it on/off with a button
✅ How to handle grouped ripple elements inside Collection Lists
✅ How to cleanly remove the GUI before going live
This one’s for anyone who loves native-feeling animations and wants more power without touching a line of code.
👉 Watch on YouTube: https://youtu.be/zSrlfjQCTXs
📂 Helpful Resources:
- Glass Navbar: https://youtu.be/X0MYB9BHu60
- Masonry Layout: https://youtu.be/j07PY6IMOu4
0 Comments