5 ms·
Off-Canvas Sidebar Transitions with CSS
- coffeecodecouch 12y agoNice 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.
- joshuak 12y agoVery well done, thanks for sharing. Source: http://tympanus.net/Development/SidebarTransitions/SidebarTransitions.zip http://tympanus.net/Development/SidebarTransitions/SidebarTr...
- rev087 12y agoThat'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.
- nilliams 12y agoYep 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 http://h5bp.github.io/Effeckt.css/off-screen-navs.html
- coreymgilmore 12y agoI like it. Useful for more appy websites I would think. Reminds me of the FB app nav menu.
- plicense 12y agoI love the work you typmanus peoplr do. Simply awesome :)
- kcbanner 12y agoHuh, all of these are fairly jarring and don't really help then overall UX
- dredmorbius 12y agoDittos. 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.
- Kiro 12y agoSo if something doesn't help the UX it's not worth having? In that world everything would be pure HTML.
- Geee 12y agoWhat? This kind of off-canvas sidebar is the most popular type of menu on mobile apps.
- hyperion2010 12y agoIf 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.
- Kiro 12y agoWhat do you mean? Pressing the menu button is an active action so it's not like it's moving it randomly.
- nilliams 12y agoYou 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.
- huhtenberg 12y agoAnyone else see almost all of these as stuttering 2FPS animations? That's on most recent FF on a high-end W8 laptop.
- baddox 12y agoYep. 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.
- jeroen 12y agoSupersmooth in Safari 6, but just off in Firefox 28. (MBP 2010, 1920x1200)
- _random_ 12y agoYeah, but what would you expect from dynamic scripting?
- Bjoern 12y agoRelevant: http://h5bp.github.io/Effeckt.css/ http://h5bp.github.io/Effeckt.css/ http://h5bp.github.io/Effeckt.css/off-screen-navs.html http://h5bp.github.io/Effeckt.css/off-screen-navs.html
- Geee 12y agoHow is performance on Android? On iPhone 5 it's super smooth.
- petarb 12y agoIt is incredibly smooth on Nexus 4. Bummer to hear it didn't work so well on iPhone