

Off-Canvas Sidebar Transitions with CSS - alixaxel
http://tympanus.net/Development/SidebarTransitions/

======
coffeecodecouch
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.

~~~
Kiro
Why is it bad UX?

~~~
toxicFork
That's because the rest of the page moves.

------
joshuak
Very well done, thanks for sharing.

Source:

[http://tympanus.net/Development/SidebarTransitions/SidebarTr...](http://tympanus.net/Development/SidebarTransitions/SidebarTransitions.zip)

------
rev087
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.

~~~
nilliams
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](http://h5bp.github.io/Effeckt.css/off-screen-navs.html)

------
Bjoern
Relevant:

[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)

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

~~~
baddox
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.

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

(MBP 2010, 1920x1200)

------
hyperion2010
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.

~~~
nilliams
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.

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

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

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

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

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

~~~
dredmorbius
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.

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

~~~
webmaven
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.

~~~
petepete
All very smooth for me on a Nexus 5.

