
Show HN: I Design with Code - chrisgannon
http://codepen.io/chrisgannon/pen/VjWWZO
======
wrigby
I was curious as to how this was done, so I took a look at the external JS
that CodePen was configured to load. He's using GreenSock[1], which looks like
a really cool tool for building rich interactions and animations with SVG+JS
in the browser.

1: [https://greensock.com/](https://greensock.com/)

~~~
OzzyB
It is.

But it's never got much love outside of Advertising/Marketing circles (was
originally a animation toolkit for Flash, now JS) because it was closed source
and pay-to-use.

It (probably) is the best animation library out there.

~~~
pmarreck
So it's now open-source? If so, cool.

> was originally a animation toolkit for Flash, now JS

I wonder how difficult that transition was.

~~~
OzzyB
> open-source

Take a look at his licensing page. [1] Certainly isn't Open Source in the
traditional sense and the terms are pretty convoluted; again IMO the reason
for it not gaining mainstream developer adoption.

I remember paying a yearly fee ($100?) for their "Club Greensock" membership
so I could develop and supply code for clients and be in good standing. Of
course the costs involved trying to replicate this toolkit and keep within
deadlines made the fee seem very reasonable at the time.

> transition

There was definitely a transition, some Devs might argue it wasn't that
painful; but certainly having a JS version of this particular codebase helped
immensely, and also proved that we could still do all the "sizzle" we were
able to do in Flash now with JS.

The posted example is testament to that IMO. Very smooth :)

[1] [https://greensock.com/licensing/](https://greensock.com/licensing/)

------
wingerlang
Neat, but a bit ironic since the visualisation is "using a GUI" to design
stuff.

~~~
chrisgannon
The GUI animation is completely coded which is the 'punchline', so to speak.

------
eliangidoni
I would like to see less code and more of everything else. This is funny
though :-)

~~~
adityamoghe
I'm genuinely surprised the kind of reaction this comment is getting. There
wouldn't be a design if it wasn't for actual programming.

The vector graphics you see are mathematical models which are 'coded' in a
script or a programming language and animated with the help of... again...
programming.

I understand the concept of less code and more stuff, but the fact that people
are saying programming is not for designing is just simply absurd. The tools
on top of which you design convert everything into code.

I'm in no way saying people should stop using these tools or design should
only be done through code. But knowing how to visualize things in your mind
and materializing that concept through code/programming is beautiful and (in
my personal) opinion makes you a better designer.

~~~
chrisgannon
I'm fairly shocked too. I appreciate that lots of people don't understand this
way of creating stuff but to suggest that programming and design are two
separate entities is to deny an exciting approach to design in general.

------
TrisMcC
The visualization is much less interesting in Firefox.

~~~
tomelliott
Looks the same here...

------
brett40324
I dont see how this is even slightly novel, or interesting. I say this because
there's endless examples of cool svg and css driven animation and interactive
art that is 'coded'.

~~~
kevinwang
It's a Show HN..

------
nojvek
I see a blank screen on phone.

------
SEMW
Neat, thank you for sharing :)

------
jnmandal
Awesome!

