Loading video...

Video Failed to Load

Go Home

iOS-style morphing context menu w/ css transitions 👨‍🍳 [popover] api + anchor positioning + transition-behavior: allow-discrete

31,121 views • 9 months ago •via X (Twitter)

15 Comments

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ8 months ago

seen other versions of this floating around but they missed the mark for me in terms of UX 👎 non-semantic markup, ignoring user prefs, no smart placement you don't need libs for any of that stuff, you can jus' build it yourself and wrap it up in a web component ✅

joshpuckett's profile picture
joshpuckett9 months ago

the directional curve on this is very nice 👌

adeeb's profile picture
adeeb8 months ago

Now this ur really cool

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ8 months ago

@a6xx9rq thanks 🙏 had to scratch the itch

DesignBea🎀's profile picture
DesignBea🎀8 months ago

You cooked 🔥🐐

Moe is tired's profile picture
Moe is tired8 months ago

Hi, do you have a website or codepen where you share the source code for your components?

Zantos's profile picture
Zantos9 months ago

Beautiful

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ8 months ago

thanks Kyle 🤙

Gurbinder's profile picture
Gurbinder8 months ago

which chrome tool is that? to preview animation in slow mode?

cauã adomaitis's profile picture
cauã adomaitis6 months ago

animating width and height or just scale? I always struggle with that and end up with some jank

zenith's profile picture
zenith8 months ago

Another day to learn from you!

Anže Matelič's profile picture
Anže Matelič8 months ago

Nice implementation . But have to say I am not the biggest fan of this version 😅

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ8 months ago

you mean the iOS style? i pretty much copied it from a screen recording and reduced the alpha + border-radius

Anže Matelič's profile picture
Anže Matelič8 months ago

Yeah I mean the ios style. I don’t know but just to much bouncing for my taste 😅. But yeah respect for making this with css

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ8 months ago

oh yeah, i hear that 😅 i jus' been screen capturing things from my phone and messin' with them. i tried to pull it back a little, this one's from the Photos app and that has some significant bounce!

Related Videos