12 Incredible CodePen.IO Demos

By  on  
CodePen.io

Whenever I need to put my ego in check, I go to Chris Coyier's new CodePen.IO site.  CodePen.IO is an incredible showcase of HTML, CSS, and JavaScript, displaying the talents of developers creating effects that 99% of the world's front-end developers couldn't create.  I spent a few hours while on CodePen, and after I picked my jaw up from the floor, I put together a collection of my favorite CodePen.IO demos.  Enjoy!

Draw Worm

Draw Worm is an eye-catching, canvas-based animation that creates branches; better yet, the animation follows the mouse, creating more branches.

Navigation Knob

Navigation Knob, created with only HTML and CSS, is a circlear knob which illuminates the selected value when clicked. The value change is highlighted by opacity shine and animating around the circle. A great feat without JavaScript!

Trail

Trail is another cavas-based masterpiece which creates different color rays that follow the user's mouse at an accelerated rate. Even color is that you can see grey lines stay in the background, representing vapor trails.

Nothing is Beyond You

Nothing is Beyond You is another no-JavaScript demo, abusing CSS animations and shapes to create an underwater bubbling effect.

Single Element Google Chrome

This single-element demo composes the Google Chrome logo using :before and :after, as well as a number of CSS gradients. Hover over the logo and it shrinks and rotates too!

Twisty

Yet another awesome CSS-only animation; this demo uses 30 DIV elements and yet only 4 real CSS declarations. What's more impressive is that it's not just a spinning set of elements -- the elements warp into different shape patterns too.

Linjer

Linjer starts out as a pulsating set of colored lines, until you click around the lines! The animations intensify near the clicks and the rippling becomes more meaningful.

CSS 3D Test

CSS 3D Test presents a rotated 3D image which animates to a presentable position when hovered. You'd be surprised at how little CSS is used to accomplish this task.

Social Switchbook

Social Switchbook is probably the most practical of the demos provided in this post. The effect provides a keyring-style set of elements which animate into display as you hover over each. No JavaScript involved.

Canvas Fireworks

Canvas Fireworks is a neat and responsive demo, shooting fireworks to the position at which you click. There's even a control panel to all you to customize speed, color, and accuracy of the firework.

Breaking Bad

The guys on Breaking Bad sell one hell of a drug, and Tim Pietrusky must have also beed on one when he created this excellent SVG-powered tribute to the shows opening credits. Take note of how realistic the chemical smoke looks behind the logo!

Sketch.js

The sketch.js demo is an awesome bubbling effect that follows your mouse, creating circles of all sizes and colors. Even cooler is that the circles shrink and move in random motions as they get further away from the mouse!

And there you have it -- mind-blowing CSS, JavaScript, and canvas-powered animations that push our browsers to the brink. All credit due to the authors of these fine animations!

Recent Features

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    Image Reflections with CSS

    Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without...

  • By
    Using MooTools to Instruct Google Analytics to Track Outbound Links

    Google Analytics provides a wealth of information about who's coming to your website. One of the most important statistics the service provides is the referrer statistic -- you've gotta know who's sending people to your website, right? What about where you send others though?

Discussion

  1. Wow! Thanks for sharing those; I can’t help but be continually reminded of how fortunate we are to be living in a period when there’s so much exciting innovation going on on the web. Pretty awesome that the source code is easily viewable, so that one can figure out what’s going on. :-)

    I noticed, though, that they use quite a lot of CPU cycles; for that reason I’d be slightly wary of deploying one of these effects on a ‘real’ site.

  2. Burak Kanber has some awesome tutorials on his blog about javascript physics, for anyone interested in wanting to learn about this type of stuff: http://burakkanber.com/blog/

  3. Thanks for adding my Breaking Bad tribute to this awesome collection of web stuff!

  4. Thanks for featuring my Social Swatchbook in this very neat blog post. I guess it has been hard to pick 10 pens among all those absolutely amazing works on CodePen. :)

  5. Thanks for sharing those, they’re prety cool!
    On thing to notice is that, at least on up-to-date Chrome 22 beta they’re freezed and have to reload the frame for they to work for a while before they freeze again. Do you think it’s a Chrome or Codepen bug?

    • I noticed some oddness like that too — this doesn’t happen in the full demo pages. I’m guessing it’s a mix of Chrome and the IFRAME.

    • It’s a feature of codepen! Every “preview” (like the iframe) stops after 5 seconds because of performance issues! If they don’t stop, the page would be very slow!

  6. David, thanks for the mention of my fireworks! I seem to be experiencing that iframe issue as well.

  7. Thanks for pointing out the navigation knob. I’ve been looking to learn from dissecting good examples to help with a PhoneGap project. This is ideal.

    The 3D solar system added just yesterday has to be my new favourite. http://codepen.io/juliangarnier/pen/idhuG

    • Ricky

      Poor pluto :(

  8. Hi thanks for them – but How we can use them..thanks so much again

  9. nice codepen ! Here my favorite list for 2013 !! http://www.olivieralbertini.com/Best/Codepen

  10. Awesome effects. Strengthen our css knowledge.

  11. Aweez

    Where is tearable cloth??????

  12. bgthedev

    Hi,

    These are really nice ones, thanks for sharing and keep inspiring :)

    I want to create an animation where there will be 2 different images (similar like before and after image effects with color and black & white image) but unlike, here it will be 2 different images and not a grayscale (so css property may not work).

    The second image will cover up/load circular motion.

    here is the demo I created http://codepen.io/bgthedev/details/wzrGxJ

    In this demo the problem is, as you see, it is noticeable that I have used 2 separate images which is not proper.

    Is there a way to create such animation using html,css,js ? except clip-path because that does not work with firefox (grumpy :x)

    Thanks in advance! :)

    BG

  13. Inspired from Facebook, Medium image preloading. http://codepen.io/ramshid/details/vLWdKR/

    for live site demo visit http://boostlizer.com

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!