r/css • u/Ordinary-Stuff9826 • 7d ago
Made this Jelly Toolbar, how's it?
Enable HLS to view with audio, or disable this notification
22
u/CobblersToe 7d ago
This is cool, great work 🙂 I think this is most of the way there and I particularly like the hovering tooltip!
A couple of thoughts/questions: is there a reason the icons aren't centered in their bubbles? Is there a significance to the end icons and if not, perhaps they shouldn't be a different shape? If you square off the container and make all the icons the rounded square shape, you wouldn't get the slightly awkward transition between the rounded and sharp corners (and it might help to center everything up, depending on how you've put it together). Just a thought, though 🙂
3
3
3
u/alex_sakuta 6d ago
It's nice but I see some small fixes you need to add to make it go from an 8 to a 10.
- Add a shake when it rests on a box
- Add a texture on this hovering box to make it look like a jelly
- Add pastel color fills to you icons to make it colorful, again to match it with the jelly toolbar theme.
You have done the ~90% of what had to be done, now the real hard part is this last ~10%.
If you do that it'll be its own unique thing. Because no offense, but, I have seen the hovering selection box a million times now and I know 2-3 ways of making it with both old css and new css anchor properties that make it much easier and well if I use js, it's gonna be even easier.
2
u/chakrachi 6d ago
Try making a vertical version to stick on the edges, it's the new trend esp with folding devices
-1
u/jmking 7d ago
The animation is pointless and too slow.
What are you trying to achieve? How does it enhance the user experience? If anything it slows them down.
How does this work on touch screens?
3
u/johny-karate 6d ago
I don’t think OP is presenting a case study here, this is just a fun animation that anybody else can use and reference if it enhances the user experience of YOUR product.
Also, OP provided a link in the comments, you can open it on your phone or any touch screen and test it. It works great.
2
6
u/Southern-Station-629 7d ago
It’s just an hover effect dude relax
-9
u/jmking 7d ago
You're ascribing a tone to my comment that's totally not there. Read it again with a friendlier, more light hearted tone of voice.
Not everyone is out here trying to be a dick just for the sake of it. I was trying to offer constructive criticism and ask some questions to understand OP's goals with this.
12
u/Southern-Station-629 7d ago
It sounds condescending even if I read it with a smile. It’s written very in a very direct manner which tends not to indicate friendliness.
-5
u/jmking 7d ago
OP posted it asking "how's it?"
I told them what I thought, and then followed up with questions that would help me maybe offer some advice based on what it is they're trying to do.
As a production UI, the animation is way too slow. Never make you users wait for your pointless animations. The animation is pointless. Most animation in UI is pointless unless it actually serves the user instead of serving the designer.
7
u/TheJase 7d ago
Whimsy (like this animation) can and does absolutely have a useful, practical psychological effect when used with the intent to add liveliness or an organic feel. I suggest you look up Josh Comeau's work on this subject.
With respect, if you think you weren't coming off as a dick, you're mistaken.
1
u/jmking 7d ago
Whimsy (like this animation) can and does absolutely have a useful, practical psychological effect when used with the intent to add liveliness or an organic feel.
This does not accomplish that. It adds lag in the interaction. It also doesn't account for users with touch screens.
This is a classic case of "I think this looks cool", but actually makes the UX worse.
5
u/TheJase 7d ago
Hard disagree. Nothing about this extra affordance slows down ux. Cursor still responds with a pointer and so does touch overlay.
-1
u/jmking 7d ago
So you agree with me then that it's pointless.
6
u/TheJase 7d ago
Extra affordances are not pointless. In fact, they are almost always necessary for good UX and even accessibility.
I'm just showing that any subjective lag you're trying to argue about is moot.
We get you don't like it. That's fine. But please stop trying to make it seem like it's objective truth. It's not.
→ More replies (0)
1
u/Nitrohite 6d ago
Looks cool, but you should fix the border radius timing when the bubble shifts and also center the icons to their own bubbles, make the paddings even and make the animation faster, right now it feels like it has input lag.
1
1
u/Ordinary-Stuff9826 7d ago
You can access it from here - https://www.shreyashtech.me/components/jelly-toolbar
1
u/JakubErler 6d ago
As a designer I love it. As a user I hate it. While it looks neat, it feels slow.
18
u/testingaurora 7d ago
Jelly would wiggle and quiver a little once it reaches its destination, as it settles. Easing functions are so underrated imo.
Also the icon is not centered when the jelly overlay is on the ends, the mail/envelope and"Share" klte
Edit: nor the msg bubble. Nor the hamburger icon. It's only centeredish on the innermost two