123
user profile image

Most of the time these slide in or fade in - just playing with other instantiation animations.

All animations are class-driven, and are animating the exact same HTML elements.

Comments

  1. This is really nice :)

    Add overflow: hidden; to the html and body style to prevent the scroll bars appearing on the blowup animation (not that practical in RL but makes it look nicer on here :)

  2. Good suggestion, @miketricking! Added.

  3. Nice advice @miketricking, I think it is practical if you set it only when the modal is open/opening; because you usually don't want your user to scroll at this moment !

  4. Love the Meep Meep!

  5. Hi, this pen is so cool.

    however, shouldn't there be .button {cursor:pointer;}

  6. @long-lazuli yes that would be perfect although I'm not sure on how to achieve that. Do you know a way?

    Why isn't there a site which is essentially github and codepen merged together?! lol

  7. @miketricking, I accomplished it by tweaking the jQuery to add/remove a class from body and styling that class (.modal-active) in my CSS.

  8. @altaf7422 - yes indeed. This pen is actually still being worked on; it got featured before I was done, so it's not completely polished yet. If you noticed, I actually added two new effects this morning (meep meep and sketch).

  9. Added another one - this one is pretty silly. Called it "Bond".

  10. Great stuff!

  11. @miketricking > @designcouch did it it on the code above :

    body.modal-active { overflow: hidden; }
    

    :)

  12. Thanks @dmsanchez86 - much appreciated.

  13. Super clean!!

  14. Thanks @quangogage!

  15. Could the modal content be clickable, for example adding a form within it?

  16. super cool ! I like them all :D

  17. I love sketch in animation. I was trying to figure out how to make the box bigger, but every time i increase the size the line doesn't quite draw correctly. Any suggestions anyone?

  18. These are great, but do you think you can try it with the dialog tag instead?

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

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