Show HN: I Design with Code | Hacker News Reader

Show HN: I Design with Code

codepen.io

149 pointschrisgannon36 comments

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/

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.

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.

> 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/

With over 1.6 million sites using GreenSock (and growing fast), I'd say it's gotten plenty of love outside Advertising/Marketing circles ;)

It's widely seen as the go-to animation library on the web...period. Most award-winning sites use it. Chris Gannon is clearly a magician with it. Love his work.

As for the licensing, the codebase is on github and it's free to use in the vast majority of use cases including most commercial ones. See http://greensock.com/why-license/ to understand the "why" behind the model. Hopefully you'll see how it can actually be a very good thing for the community (as evidenced by the decade-plus track record and ongoing updates). But I realize it's not for everyone and that's okay. There are some misunderstandings out there about the license, so I hope folks will take a moment to read that article I mentioned above.

Happy tweening!

Yes it is the best library by a mile and it has got lots of love in the dev/des community. A well maintained, paid library is preferable to a neglected open source library.

I've worked with Greensock extensively at work. It's a fun library with its own community. Once I figure out how to play nicely with React, I hope to use it extensively in my pet projects.

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

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

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

I'm guessing you aren't a programmer then?

You don't have to be a non-programmer to want less code. Some things are much better represented with visual models than text streams.

Yup. "I design with code" sounds a bit like "I clean floors with a power drill". A powerful tool, indeed, but very ill-suited for that job.

Code is perfectly suited to design. What is design if nothing other than patterns. What's code? Patterns.

Different kind of patterns. Design is about visual abstractions; code is more about textual and conceptual abstractions. The design space of a visual medium tends to be much easier to explore... visually.

(Also consider that a typical way of developing a website or application UI involves everything from drawing on paper through painting in Photoshop through building mockups in a graphics-oriented design package.)

I think at times we get too caught up in the visual components. Visuals like sketches and mockups and even code-less prototypes are perhaps best for communicating concepts, which is a part of design. But there's also the part of design that's less about communicating designs and more about applying the concept and designing a way that it can be created and engineered. That's where designing with code is extremely helpful.

So yeah, if I'm exploring or communicating ideas to non-technical people then yeah maybe code is less appropriate, but to say that you shouldn't design with code is ignoring a huge part of the design process.

Is architecture best represented in code? It's all about patterns.

Why do we have CAD tools at all when architects and engineers could just be writing code for buildings?

Some people need those visual metaphors in order to create something. There are people who think differently (from you) and a CAD tool would simply be a hindrance. And if the resulting building is top quality why care how the blueprints were made?

>Whats code? Patterns.

Im not trying to insult your work, but this is so grossly generalized and false that it's absurd.

You're not insulting my work at all :) On the contrary the fact that you're discussing it means you think it worthy of discussion.

But please note that programming mostly definitely is made up of patterns - ask any programmer. It's not absurd, nor a generalisation, it's a fact. If you're interested check these links out: http://code.tutsplus.com/articles/a-beginners-guide-to-desig... https://en.wikipedia.org/wiki/Software_design_pattern

I'd bet that most people who have done advanced animation work [with code] can see exactly what Chris means. I certainly can. There is incredible motion design work that is purely accomplished in code. Certain things are faster and far more flexible in that medium. He's not saying "Design can and should only be done with code". I don't understand why anyone would bash the sentiment expressed in Chris' work. I think it's entirely valid and deserves our respect.

Code is a tool, just like a GUI. Most GUIs just abstract away the creation of the code anyway. If a guy like Chris can leverage code as a tool directly and doesn't need a GUI, more power to him. There are plenty of effects I've created with code that would be an absolute nightmare to try to create with a GUI.

> There is incredible motion design work that is purely accomplished in code. Certain things are faster and far more flexible in that medium.

There are, but not that much. Look at the code of this demo. It's not obvious, it was probably hard to tweak to look nice, not to mention doing any debugging.

> There are plenty of effects I've created with code that would be an absolute nightmare to try to create with a GUI.

That's kind of my point. It isn't that code is better-suited to this job - it's that our GUI tools are mostly stuck in the static world and suck for dynamic / interactive visualizations.

Bret Victor put a lot of thought on how to improve this state of affairs; he also brings convincing arguments that such things are still better-suited for direct, visual manipulation - that coding directly is a crutch we use because of lack of better tools.

Some good talks and essays on this:

http://worrydream.com/MediaForThinkingTheUnthinkable/

https://vimeo.com/66085662

http://worrydream.com/DrawingDynamicVisualizationsTalkAddend...

https://vimeo.com/64895205

How about code that's closer to NLP?

Using my Powershell module, this creates a Powershell module that loads a Powershell Filter that does FizzBuzz:

New-Module FizzBuzz.ps1 (New-Function Filter-FizzBuzz (New-FunctionStatement If -not _ Modulus 15 'return "FizzBuzz"' (New-FunctionStatement ElseIf -not _ Modulus 5 'return "Fizz"' (New-FunctionStatement ElseIf -not _ Modulus 3 'return "Buzz"' 'return $_' ) ) ) -Filter)

And that command's output: https://github.com/Gilgamech/Main/blob/master/FizzBuzz.ps1

Yeah, I don't see how this kind of code is helpful for design (taken from the codepen).

  mainLineMask[0].getAttribute('d'),
    mainLine2MaskPath = "M148,122.5c82.2-71.6,377,53.3,504,0C766.5,189.5,65.8,194.1,148,122.5z",
    mainLine3Path = "M148,122.1c152.9,62.6,377,56.4,504,0",
    mainLine3MaskPath = "M148,122.5c152.9,63.6,377,53.3,504,0C766.5,189.5,65.8,194.1,148,122.5z",
    mainLine4Path = "M148,122.1c152.9,62.6,377-83.1,504,0",
    mainLine4MaskPath = "M148,122.5c152.9,63.6,377-84.7,504,0C766.5,189.5,65.8,194.1,148,122.5z",

Likely made using another piece of code.

It's code all the way down.

We clearly see design differently then. These lines of code are curved shapes that the bezier line will morph to.

Remember, just because you 'don't see how this kind of code is helpful for design' it doesn't mean that other people share your view. We all see things differently - a good thing to remember especially in these times.

I understand that, and as a developer, I'm used to working with stuff like this.

However, without some sort of interactive IDE, this just feels like magic numbers. The code itself, as written, is not enough to help you visualize what you are producing.

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.

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.

The visualization is much less interesting in Firefox.

Looks the same here...

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'.

It's a Show HN..

I see a blank screen on phone.

Neat, thank you for sharing :)

Awesome!

Reply on news.ycombinator.com