From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Today we’d like to share some subtle proximity feedback ideas with you. We’re exploring a progressive hover effect which triggers not just when we are hovering an element but progressively, when we come close to it. There are several interesting use cases for this kind of effect and today we wanted to showcase some of them.
The demos are kindly sponsored by monday.com: Project & Time Management has never been easier. If you would like to sponsor one of our demos, find out more here.
We’ve created a couple of demos where we explore the effect. The first demo is a form that highlights required (or invalid) input fields when the user moves close to the submit button. Like that, one does not need to click/submit the form and get feedback on problematic inputs; feedback is provided prior to that but not while the user is typing which can be a bit annoying. It’s a bit like trying to predict what the user will do next which is made possible by the mouse movement, i.e. seeing where the user is directing his mouse towards.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The second demo shows a mockup of a gallery. Here we do something progressively to the previous and next items before we hover them. We also enlarge a plus icon when coming closer to it, indicating that there’s more to see when it’s clicked.
The third demo shows a search concept where the search input gets progressively revealed while the placeholder text disappears.
The fourth demo progressively slides a menu from the right side when coming closer to the edge and the fifth demo shows an example of a placeholder text effect. Demo 6 explores some image effects and the last demo shows how this concept can be used on icons, links and buttons to create interesting effects like making a heart beat faster the closer one moves to it:
We hope you enjoyed these little effects and find them inspirational!
References and Credits
- TweenMax by Greensock
- Charming.js by Yuan Qing
- Images by Unsplash.com
- imagesLoaded by Dave DeSandro
Thanks, only for desktop interesant idear
Very very very nice ?
Wonderful stuff altogether! My favourites were the search and heart examples. A full smile grew on my face as I slowly approached those options 🙂
Great idea, congratulations, i love this blog
This is great idea., Mary Lou
I think using TweenMax is much more preferable to use than anime.js, in terms of simplicity.
Hey, also could you provide a drag and scroll tutorial playground. Would be really great to see one. Thanks.
Is this inspired by https://dribbble.com/shots/4527247-Portfolio
Proximity Feedback is sounding like an official term, is it often used?
Hi Manuel, it was not, but that’s a really awesome shot 🙂 It’s not a new idea though. The term just made sense to me when trying to figure out a suitable description, not sure if it’s something used often… Thanks for your feedback!
This is awesome! Progressive approach / animation speed is such a great idea 🙂
Would have been a lot better if you shown how you approached and made this rather than just show the end result and throw the source code.
Now imagine mixing these with this tech for extra mobile and desktop feedback:
https://atap.google.com/soli/
Awesome examples! I had a very similar idea for my main menu when I created this wedding website: http://dan.christine.wedding/
Nice to see it formalized
Congratulations, man! Very cool.
A great idea and being a person who loves browsing and all that on desktop, this is a BIG WIN!
Can’t wait to integrate this into my new site.
I think proximity feedback will be useful in boosting conversion rates for particular user actions on desktop sites, by removing intermediary steps most users must take prior to that conversion take place. Why make the user do all the dirty work when we know for a fact (perhaps based off sample user data) what they are going to do? Why not do the dirty work for them, so we can bring them closer to a conversion?
TweenMax link goes to http://greensock.com/standard-license
Cool!
Do you think there would be any advantage to using the Intersection Observer API for something like this?
Is it possible for this to be used a page with overflow-y:scroll? Playing around with it and getting very odd behaviour!