css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Based on this awesome dribbble shot - https://dribbble.com/shots/1949368-Sidebar-animation

Completed without any animation libs, just simple js with requestAnimationFrame and custom easings.

Comments

  1. This is wonderful!

  2. @tmrDevelops thanks :)

    I found better effect version here http://sndtrck.fr/dev/menu-swipe2/ Looks awesome, now i'm trying to understand his code :D

  3. @suez Honestly, I like yours better. It's just the right amount of elasticity for a sidebar, I wouldn't change it - the other example may be a bit much... But - if you can add the touch event to yours, that'd be pretty awesome!

  4. My demo has touch events support http://i.imgur.com/mrzW0dK.png At least i checked them in F12 mobile simulator.

  5. oh you know, I'm sorry, it does. On my touch screen, when I'm viewing in editor, for some reason the touch doesn't respond, I end up sliding my entire screen..lol, but in details and full views it works like a charm ;)

  6. I love the bouncy-ness!

  7. I thought about making this exact thing! You did an excellent job! Looking forward to seeing more of your work!

  8. Ohh. This. This is great.

  9. Such win. Good job! I'd also agree this has just the right level of elasticity!

  10. Thomas @webinnov_france on

    Sweet pen...oh...You have nice friends ;) Would you introduce me to Nathalie Portman Please ? hihihi

  11. @webinnov_france sorry, access to friends is strictly limited!

  12. wow man this is fantastic! i think even the guy who made the dribble in AE would say hell yes this was what i was going for! AE can do things that sometimes code just makes impractical. this is a 100% win in my book. great work man!

  13. Love it. Great job :D

  14. You need to be creating apps!

  15. I’ve tested on mobile devices. I’ve noticed two issues:

    1. In Chrome on Android 5, when I open and close the menu repeatedly, after a while the animation starts slowing down and becoming janky.
    2. In Safari on iOS 8, the menu opens normally but it cannot be closed. (Tapping on the area at the right side of the menu does nothing.)
  16. @simevidas thx for testing, i will try to fix it soon.

  17. love it :) nice use of svg (Y)

  18. Fun concept. No more boring slide!

  19. @simevidas i made few little improvments and may be they will fix Chrome Android 5 bug (but i can't test it, because my phone is on Android 2.3 and all online simulators laggy as hell :) )

    Bug with Safari on iOS 8 is really strange, for some reason click event outside sidebar not working. I mean, i have handler $(document).on("click", function(e){//}) and when i'm clicking on body, nothing happening! Some special type of magic.

  20. That's pretty cool!

  21. Oh this is delightful!

  22. This is amazing! I wish I knew svg

  23. @SomeGuyWhoCodes svg is not that hard :) I started learning it 2 months ago, and here is result (one of many)

  24. This is awesome. Sidebar reminded me of LocoRoco. :D

  25. @suez I'll take at a shot at it right now! Can you recommend some tutorials?

  26. @SomeGuyWhoCodes mostly, i'm just randomly googling stuff. And google often points me on this site http://tutorials.jenkov.com/svg/index.html . If you need something more book-like, try this http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Getting_Started . This online book looks ok for start. But with svg you need to practice twice as much as you read.

    Fastest way to learn, is non-stop imagination and practice through replication. Because reading about "arc" path is one thing, and actually working with it i far more painfull thing :D It took me about 4 weeks, before i FINALLY understand how it's exactly works.

    You can check my other svg demos (http://codepen.io/suez/tag/svg/), all of them relies on math&geometry with javascript and svg path element.

  27. @suez Thank you so much :D

  28. @SomeGuyWhoCodes you must read this new awesome article http://sarasoueidan.com/blog/building-a-circular-navigation-with-svg/ !

    I wish that I could read it before i suffered with few arc demos :D

  29. Great job! What about eliminating fade transitions completely, and using elastic expansion for everything?

  30. @Emasoft i'm using fade, because i can't place default html markup inside svg. So at first i'm animating svg, then i'm showing content above. I just tried it with intant transition time, and it's looks really weird. You can play with $transTime in css and sContTrans in javascript (they both must be equal).

  31. @suez Ok, but what if you expand elastically an svg circle or box masking out another big svg box (a background covering the html elements behind)? The effect will be like blowing an hole in a cardbox and seeing through.

  32. I love it!! It's so cool!!

  33. I love it.

    Would be cool if the sidebar stretched in the location I click or touch, instead of only in the middle.

    Would feel slightly more realistic that way.

  34. @suez Yes, that exactly. But I want to see the code for it!

  35. I've had this shot bookmarked for ages meaning to code it, way to a) be more proactive and b) do such a great job

  36. The images broke, but it is still awesome!

  37. @lalov1 thanks, I was just finishing fixing all broken imgur images and totally forgot about main demo :D

  38. That is gorgeous. Well done all the way around.

    While the code is open, any complaints if I wish to use this in any of my own projects?

  39. @jradthebad I didn't received notification about your message, saw it only now. You can use whatever you want :) Anyway this code is really outdated, compared to my current state of programming.

  40. It would be nice if the menu popped elastically out on just a click as well - the dragging is very cool, but a lot of work if you have to do it every time.

  41. Без комментариев ... Шедевр !!!

  42. This is fantastic, really like this!

  43. Hi. Really good job. From where did you get the smallelastic function? Can you provide the reference to it?

  44. It's really nice. For better UX, put the arrows inside the bar which user has to drag. It is much clearer then.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...