Off-Canvas Sidebar Transitions with CSS | Hacker News Reader

Off-Canvas Sidebar Transitions with CSS

tympanus.net

210 pointsalixaxel28 comments

Nice demo. I love "shelves" on mobile apps, but I found all of these except "slide in on top" annoying. The rest reminded me of those ridiculous Powerpoint transitions where every letter falls into place one at a time. Do a favor to your users and don't let novelty transitions overshadow actual UX.

I concur, please do not do this to your site unless you want me to leave

Why is it bad UX?

That's because the rest of the page moves.

Very well done, thanks for sharing.

Source:

http://tympanus.net/Development/SidebarTransitions/SidebarTr...

That's pretty neat, but this demo uses some sort of scrolling emulation, so in the iPhone (tested in a 4s) this particular implementation breaks: Taping the status bar to scroll to the top, momentum scrolling, elastic bounce at both ends.

Yep I was disappointed by this too. I had a few frustrations trying to integrate the off-canvas navs from Effeckt.css [1] into an actual app (was combining with Ratchet) and found their code to be pretty hacky/bad. I ended up with something that worked just about okay on iOS but was pretty rubbish elsewhere.

So I was hoping for more when I saw these. I would love to see one of these demos fully fleshed-out and tested across devices.

[1] http://h5bp.github.io/Effeckt.css/off-screen-navs.html

Relevant:

http://h5bp.github.io/Effeckt.css/

http://h5bp.github.io/Effeckt.css/off-screen-navs.html

Anyone else see almost all of these as stuttering 2FPS animations? That's on most recent FF on a high-end W8 laptop.

Yep. It gets slow very quickly as window size increases. At fullscreen 2560x1400 it's incredibly jerky, but with the window sized to 1024x768 it's incredibly smooth.

Supersmooth in Safari 6, but just off in Firefox 28.

(MBP 2010, 1920x1200)

Yeah, but what would you expect from dynamic scripting?

If you move the page under my mouse I am going to hate your website and never come back. If your UI elements distort or displace content then you immediately and glaringly break the first rule of UI design: good UIs should not be noticed.

What do you mean? Pressing the menu button is an active action so it's not like it's moving it randomly.

You would normally be triggering these menus from a button near the menu, so you would expect the movement. They're only triggered from buttons in the centre of the main page for demo purposes.

I love the work you typmanus peoplr do. Simply awesome :)

I like it. Useful for more appy websites I would think. Reminds me of the FB app nav menu.

It is incredibly smooth on Nexus 4. Bummer to hear it didn't work so well on iPhone

Seems to be working very smoothly on my iPhone 5 with iOS 7.1.1.

It's working perfectly on iPhone as well.

Huh, all of these are fairly jarring and don't really help then overall UX

Dittos.

Using Chromium here: Version 33.0.1750.152 Debian jessie/sid (256984)

Most of these are what I'd classify as "annoying", and to boot, the experienced effect isn't matching the descriptions. This isn't AFAICT a widely supported feature.

So if something doesn't help the UX it's not worth having? In that world everything would be pure HTML.

What? This kind of off-canvas sidebar is the most popular type of menu on mobile apps.

How is performance on Android? On iPhone 5 it's super smooth.

I am looking at them on a 1st gen Nexus 7. The 3D ones are a bit choppy, but the others are all very smooth.

All very smooth for me on a Nexus 5.

Smooth on an iPad 2

Reply on news.ycombinator.com