CodePen Top 100 for 2015

[PointC 8,599 Likes (Superhero)]

Hey all,

 

I was looking through the 2015 most loved pens on CodePen and thought I'd say congratulations to the following for their cool pens using GreenSock: 

 

Sarah Drasner

Responsive Huggy Laser Panda Factory

 

Chris Gannon

All Devices in SVG

See the Pen WvJMXP by chrisgannon (@chrisgannon) on CodePen

 

GRAY GHOST

SVG Low PolyLion: Animated Polygons

See the Pen RNLgJP by grayghostvisuals (@grayghostvisuals) on CodePen

 

There may be more using GSAP, but I haven't looked at all of them yet. These were just some that jumped out at me right away.

 

Some of the CSS animations are kind of nice, but if I'm being honest, I just don't get the "I made this with pure CSS" obsession. I mean, am I missing something here? I look at their lengthy CSS along with all the vendor prefixes and think how easily some of that could be accomplished with just a few lines of code using GreenSock. It seems like a lot of unnecessary work to me. 

 

I've said it in another post and I'll say it again. I think there are two types of people in this world:

1. Those who think CSS animations are a good thing.

2. Those who have tried GreenSock.

 

Happy New Year Jack, Carl, Blake, Jonathan, Diaco, Rodrigo and fellow members  -  I wish you all a productive and prosperous 2016.

See the Pen waXKPw by sdras (@sdras) on CodePen

[OSUblake 9,990 Likes (Superhero)]

Some of the CSS animations are kind of nice, but if I'm being honest, I just don't get the "I made this with pure CSS" obsession.

 

Yeah, you don't get it. CodePen is part of css-tricks, so there's a lot of CSS bias. So by including that in your description you are guaranteed to get twice as many views and hearts. Plus this thing pops up when you do that.

 

 

Bonus points if your SASS looks like a completely unreadable programming language that compiles out to 5000 lines of CSS. Even more bonus points if those 5000 lines of CSS could be reduced to a couple of lines of JavaScript code.

 

Here's some of my favorite comments about CSS.

 

Why are you using SVG with GSAP

http://codepen.io/chrisgannon/details/raEJbK#comment-id-101048

 

Smoother with pure CSS instead of GSAP

http://codepen.io/pixelass/details/LpEQKa#comment-id-108362

 

Cooler with CSS

http://codepen.io/sdras/details/BinLh#comment-id-60603

[PointC 8,599 Likes (Superhero)]

Haha! I love those comments. 

 

Man - I've been doing it all wrong. I was trying to complete my projects with the least amount of code, get paid and move on to the next one. Silly me - I have to get one of those achievement badges. 

 

I wonder if those people know that it's Cascading Style Sheet and not Cascading Animation Sheet? 

[OSUblake 9,990 Likes (Superhero)]

I didn't look at them all, but here's a couple other ones that I know use GSAP.
 
Karim Malloul - Three.js

See the Pen oXJYxy by Yakudoo (@Yakudoo) on CodePen

See the Pen LVyJXw by Yakudoo (@Yakudoo) on CodePen

See the Pen yNjRRL by Yakudoo (@Yakudoo) on CodePen

 
Ignacio Correia - Motion Blur

See the Pen pJvOpL by igcorreia (@igcorreia) on CodePen

 
Lucas Bebber - Motion blur

See the Pen zxpMZw by lbebber (@lbebber) on CodePen

[Carl 9,066 Likes (Superhero)]

Thanks for the making this post PointC. I couldn't agree more.

 

When GSAP first got ported to JS we had quite a battle against the "pure CSS" mindset.

It was pretty frustrating watching people poor hours into crafting CSS animations that were impossible to edit and couldn't be paused or reversed at runtime.

 

After writing articles like:

 

http://greensock.com/transitions/

http://greensock.com/css-workflow/

 

We figured our time was better spent making the tools better and serving our users than worrying about folks that weren't quite getting it. Fortunately over the past 2 years there has been quite a shift and most reasonable people understand the very low limits of CSS for animation.

 

The bigger tragedy is the movement of folks using 100 divs and miles of CSS to create simple, static "artwork". Chris Coyier brilliantly describes this as "div town" (at time of 8:05):  

 

I just hope young developers don't see those types of demos and think anyone would ever do that on a real job. 

[OSUblake 9,990 Likes (Superhero)]

I love that myth busting article you link to in those articles. Jack sure got a lot of criticism in the comments. Shame on you for promoting GSAP with your silly benchmarks!

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

I also love hearing people talk about how CSS performs better because it uses hardware acceleration. You want hardware acceleration? Here you go...

var canvas = document.createElement("canvas");
var gl = canvas.getContext("webgl");

But that's canvas. We're talking about DOM elements.

<html-gl>
  <div>Oh, Really?</div>
</html-gl>

Yup. You can render HTML/CSS in WebGL.

http://pixelscommander.com/polygon/htmlgl/demo/filters.html#.Vo4HnhUrKUk

[Carl 9,066 Likes (Superhero)]

Hey Blake, that <html-gl> is pretty interesting. I had no idea. thx!

[Jonathan 5,176 Likes (Superhero)]

Since moving to GSAP JS in 2013, i stopped animating things with CSS animations and transitions. Due to building complex animations and then having to spend countless more days and hours changing every little thing just to adjust the timing or add a property. Not to mention all the ridiculous vendor prefixes and the cross browser wild west of the web.

 

Now i no longer have migraines, and my carpel tunnel has gotten better. You could say GSAP JS saved me from chronic pain, and was great physical therapy!

 

My hands thank you GreenSock