12 amazing animation crafts on Codepen

I try to see as much cool pens as possible. This way I discover new techniques and find tips & tricks on how to animate some cool stuff in the browser. I thought it would be nice to sum up some things I came across today.

Spinning circles

An SVG animation. Created with the Greensock animation platform. A great example of the powerful GSAP Draw SVG Plugin.

See the Pen spinning circles by CJ Gammon (@cjgammon) on CodePen.

Worldwide

A really clever way to animate an SVG with CSS only.

See the Pen AE2015 Animation: Worldwide by Adrian Egger (@adrianegger) on CodePen.

UI Animation

This one is based on a dribble shot. Especially the mask animation is very cool.

See the Pen Exploring UI Animation #4 by mario s. maselli (@mariosmaselli) on CodePen.

Vue2 Greensock page transitions

Vue is a really powerful framework. Version 2 has been out for a few weeks now and the community is growing fast. Be sure to check it out!

See the Pen Vue2 page transitions with GSAP by Tim Rijkse (@timrijkse) on CodePen.

SVG Alarm UI

This would be a slick way for an age verification screen. And it’s totally liquid! Greensock’s Draggable plugin is perfect for sliders like this.

See the Pen SVG Alarm UI by Chris Gannon (@chrisgannon) on CodePen.

CSS Spinner

Clean but effective ajax loader using CSS only.

See the Pen loader spiner by Alex Konstantinov (@oxla) on CodePen.

Meshi the CSS Dog

Great drawing of a dog using simple css shapes only! This one makes me want to have a puppy! :)

See the Pen Meshi the CSS Dog by David Khourshid (@davidkpiano) on CodePen.

SVG & GSAP Animated bar Graph

Again a great example on why GSAP and SVG animation rocks!

See the Pen SVG & GSAP Animated Bar Graph by Peter Barr (@petebarr) on CodePen.

Microdose

CSS only dot animation. Makes me thing of Escher a bit.

See the Pen Microdose by Adam Kuhn (@cobra_winfrey) on CodePen.

404 SVG Page

Really cool implementation for a 404 screen.

See the Pen 404 svg animated page concept for e-store @ Zajno (Illustrated by Lina) by Vladimir Gashenko (@gxash) on CodePen.

Fizzy Sparks

This one blows my mind! Benneth did a great job on the reflection!

See the Pen Fizzy Sparks by Bennett Waisbren (@waisbren89) on CodePen.

Color changin’

Click the pen to change the color. Really cool when you create a site for kids.

See the Pen Color Changin’ by Alex Zaworski (@alexzaworski) on CodePen.

That’s it for now! I hope you like the list. Did I miss some awesome stuff? Let me know in the comments or hit me up on twitter so I can publish it in the next batch! :)

Share Comments