9 Incredible CodePen Demos

By  on  
CodePen

CodePen is a treasure trove of incredible demos harnessing the power of client side languages.   The client side is always limited by what browsers provide us but the creativity and cleverness of developers always pushes the boundaries of what we think the front end can do.  Thanks to CSS, canvas, and WebGL, we can do just about anything in terms of visuals.  The following are nine mind-bending CodePen demos that will put your jaw on the floor.

Playing Kid

This is a God Tier™ demo.  The 3d piece of the animation is outstanding but adding the user camera takes this demo to the next level.  The three.js library is incredible and just the tool needed in this demo:

See the Pen playing kid — morph and skeletal animation by Sascha Sigl (@SaschaSigl) on CodePen.

Animated Cube Slider

Important to note that no JavaScript is required for this elegantly animating demo.  Especially nice is the shadow shown at the bottom of the cube:

See the Pen Animated cube slider by Alberto Hartzet (@hrtzt) on CodePen.

RubiCSSCube

One of my life goals is conquering a Rubik's cube and thanks to this demo I finally can!  A small detail but I love the drag cursor as well.

See the Pen RubiCSS cube by Gregor Adams (@pixelass) on CodePen.

SVG Flying Saucer

The truth is out there and that truth includes the fact that this demo's floating animation is outstanding.  No jank, no laboring, just

See the Pen SVG Flying Saucer by Chris Gannon (@chrisgannon) on CodePen.

Marvel Logo Animation

I'm not a comic book collector but the animation within the Marvel text here makes me a fan.  Wow!

See the Pen Marvel Logo animation | pure CSS by Gregor Adams (@pixelass) on CodePen.

Look Ma, No CSS

This awesome wolf animation requires no JavaScript or CSS to run.  The animation is fluid and as impressive as any demo in the list!

See the Pen Look Ma, no CSS nor JS!!! by @rafszul (@rafszul) on CodePen.

Confettis Generator

I love the acceleration smoothness in this demo.  I also love that you can seamlessly increase the speed and confetti volume with seemingly no impact on performance!

See the Pen Confettis Generator by 16octets (@16octets) on CodePen.

Particle Island

Created by the same author as Playing Kid above, this demo features a 3d stage with clouds, an airplane, and a rotating planet with trees and running water.

See the Pen Particle Island by Sascha Sigl (@SaschaSigl) on CodePen.

Yoga!

It's mostly the imagery in this demo but it looks beautiful.  The axis folding of different parts is beautiful as well.

See the Pen yoga! by Gerard Ferrandez (@ge1doot) on CodePen.

Wow.  WOW.  What a gallery is to artists is what CodePen is for interactive developers.  Let's let this act as an inspiration for us to up our visual development game!

Recent Features

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    Detect Vendor Prefix with JavaScript

    Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps).  The awesome X-Tag project has...

  • By
    Element Position Swapping Using MooTools 1.2

    We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method. MooTools 1.2 Implementation MooTools 1.2 Usage To call the swap...

Discussion

  1. Great CodePens indeed but burnt my CPU!

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