Jump to content
Search Community

CodePen Top 100 for 2015

PointC test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.  :huh:

 

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

  • Like 6
Link to comment
Share on other sites

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.

 

J33aGHo.png

 

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

  • Like 4
Link to comment
Share on other sites

Haha! I love those comments.  :roll:

 

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.  :-P

 

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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. 

  • Like 5
Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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 :)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...