[{"data":1,"prerenderedAt":316},["ShallowReactive",2],{"project-12035058":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":5,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":44,"post_text":46,"what":47,"said":94,"maker_in_thread":182,"shape":191,"grid":196,"attempts":279,"same_week":280,"maker_shows":31,"maker_hidden":308,"reader_version":309,"card":310},"12035058","codepen.io","I Design with Code","title","Show HN: I Design with Code","http:\u002F\u002Fcodepen.io\u002Fchrisgannon\u002Fpen\u002FVjWWZO","chrisgannon",1467706767,2016,149,36,223,2264,10,"notable","creative","animation design","web_app",[23,24,25,26,27],"svg animation","greensock","codepen","motion design","javascript animation","roasted",-0.172,{"positive":31,"neutral":32,"mixed":33,"critical":34},5,2,0,8,15,{"execution":37,"idea":39,"pricing":40,"design":41,"docs":42,"performance":43},{"positive":38,"critical":38},1,{"positive":38,"critical":38},{"positive":33,"critical":38},{"positive":33,"critical":32},{"positive":33,"critical":32},{"positive":33,"critical":38},[31,31,45,38,33,33,31,38,33,38,33,33,33,33,33,33,33,33,33,33,33,33,33,38,33,33,38,33,33,38,45,38,33,38,31,31],3,null,{"problem":46,"audience":46,"pricing":48,"motivation":60,"time_to_build":46,"stack":73,"openness":93,"stage":93,"team_size":93},{"value":49,"source":50,"evidence":51},"GreenSock is free for most uses but has a paid licensing model for some commercial uses","commenter",[52,56],{"id":53,"by":54,"text":55},"12036877","GreenSock","With over 1.6 million sites using GreenSock (and growing fast), I'd say it's gotten plenty of love outside Advertising\u002FMarketing circles ;) It's widely seen as the go-to…",{"id":57,"by":58,"text":59},"12036222","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…",{"value":61,"source":62,"evidence":63},"Maker argues design can be done with code, as a valid approach","maker",[64,67,70],{"id":65,"by":10,"text":66},"12036279","Code is perfectly suited to design. What is design if nothing other than patterns. What's code? Patterns.",{"id":68,"by":10,"text":69},"12035526","The GUI animation is completely coded which is the 'punchline', so to speak.",{"id":71,"by":10,"text":72},"12036900","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…",[74,82,86],{"value":75,"source":76,"evidence":77},"JavaScript","inferred",[78],{"id":79,"by":80,"text":81},"12035863","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…",{"value":83,"source":76,"evidence":84},"GreenSock animation library",[85],{"id":79,"by":80,"text":81},{"value":87,"source":76,"evidence":88},"SVG",[89],{"id":90,"by":91,"text":92},"12036760","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'.","unknown",{"praise":95,"objections":114,"requests":154,"questions":162,"alternatives":171},[96,103],{"value":97,"source":50,"evidence":98},"Smooth, impressive animation",[99,100],{"id":57,"by":58,"text":59},{"id":101,"by":54,"text":102},"12038897","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…",{"value":104,"source":50,"evidence":105},"GreenSock is a strong animation library",[106,109,110],{"id":107,"by":58,"text":108},"12036095","It is. But it's never got much love outside of Advertising\u002FMarketing circles (was originally a animation toolkit for Flash, now JS) because it was closed source and pay-to-use.…",{"id":53,"by":54,"text":55},{"id":111,"by":112,"text":113},"12042747","abustamam","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…",[115,129,139,143],{"value":116,"source":50,"evidence":117},"Code is ill-suited to design work compared to visual tools",[118,122,125],{"id":119,"by":120,"text":121},"12035982","TeMPOraL","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.",{"id":123,"by":120,"text":124},"12041451","> 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…",{"id":126,"by":127,"text":128},"12035219","wingerlang","Neat, but a bit ironic since the visualisation is \"using a GUI\" to design stuff.",{"value":130,"source":50,"evidence":131},"Code-based animation is hard to read and tweak",[132,136],{"id":133,"by":134,"text":135},"12036360","tarr11","Yeah, I don't see how this kind of code is helpful for design (taken from the codepen). ``` mainLineMask[0].getAttribute('d'), mainLine2MaskPath =…",{"id":137,"by":134,"text":138},"12047016","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…",{"value":140,"source":50,"evidence":141},"Not novel; coded SVG\u002FCSS animation is common",[142],{"id":90,"by":91,"text":92},{"value":144,"source":50,"evidence":145},"Blank screen on phone and weaker in Firefox",[146,150],{"id":147,"by":148,"text":149},"12036710","nojvek","I see a blank screen on phone.",{"id":151,"by":152,"text":153},"12036821","TrisMcC","The visualization is much less interesting in Firefox.",[155],{"value":156,"source":50,"evidence":157},"Less code and more visual content",[158],{"id":159,"by":160,"text":161},"12035785","eliangidoni","I would like to see less code and more of everything else. This is funny though :-)",[163],{"value":164,"source":50,"evidence":165},"Whether GreenSock is now open source",[166,170],{"id":167,"by":168,"text":169},"12036138","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.",{"id":57,"by":58,"text":59},[172,176],{"value":173,"source":50,"evidence":174},"Adobe Flash",[175],{"id":167,"by":168,"text":169},{"value":177,"source":50,"evidence":178},"Photoshop and other GUI design tools",[179],{"id":180,"by":120,"text":181},"12036317","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…",{"comments":34,"answered":32,"key":183},[184,187,188],{"id":185,"text":186},"12036985","Yes it is the best library by a mile and it has got lots of love in the dev\u002Fdes community. A well maintained, paid library is preferable to a neglected open source library.",{"id":68,"text":69},{"id":189,"text":190},"12035791","I'm guessing you aren't a programmer then?",{"commenters":192,"max_depth":193,"maker_replies":34,"first_comment_mins":194,"lifespan_hours":195},22,7,47,41,[197,199,201,203,205,207,209,211,213,215,216,218,221,223,225,226,229,231,233,235,237,238,240,244,246,249,252,253,256,257,259,263,266,269,271,276],[79,33,31,198,80,33],"project\u002Fpositive\u002Fexecution",[107,33,31,200,58,33],"project\u002Fpositive\u002Fidea",[167,33,45,202,168,33],"project\u002Fneutral\u002Fnone",[57,33,38,204,58,33],"project\u002Fcritical\u002Fpricing",[53,33,33,206,54,33],"commenter\u002Fneutral\u002Fpricing",[185,33,33,208,10,38],"project\u002Fpositive\u002Fpricing",[111,33,31,210,112,33],"project\u002Fpositive\u002Fnone",[126,38,38,212,127,33],"project\u002Fcritical\u002Fdesign",[68,38,33,214,10,38],"commenter\u002Fneutral\u002Fdesign",[159,32,38,212,160,33],[189,32,33,217,10,38],"commenter\u002Fneutral\u002Fnone",[219,32,33,214,220,33],"12035928","pavlov",[119,32,33,222,120,33],"commenter\u002Fcritical\u002Fidea",[65,32,33,224,10,38],"commenter\u002Fneutral\u002Fidea",[180,32,33,222,120,33],[227,32,33,224,228,33],"12037289","chs9000",[230,32,33,222,220,33],"12038215",[232,32,33,224,10,38],"12038690",[234,32,33,222,91,33],"12038709",[236,32,33,224,10,38],"12041936",[101,32,33,224,54,33],[123,32,33,239,120,33],"commenter\u002Fcritical\u002Fdesign",[241,32,33,242,243,33],"12036819","other\u002Fneutral\u002Fnone","stephengillie",[133,32,38,245,134,33],"project\u002Fcritical\u002Fdocs",[247,32,33,217,248,33],"12036415","brainary",[250,32,33,251,10,38],"12041915","commenter\u002Fneutral\u002Fdocs",[137,32,38,245,134,33],[254,32,33,224,255,33],"12036588","adityamoghe",[71,32,33,224,10,38],[151,45,38,258,152,33],"project\u002Fcritical\u002Fperformance",[260,45,45,261,262,33],"12036962","project\u002Fneutral\u002Fperformance","tomelliott",[90,264,38,265,91,33],4,"project\u002Fcritical\u002Fidea",[267,264,33,242,268,33],"12040049","kevinwang",[147,31,38,270,148,33],"project\u002Fcritical\u002Fexecution",[272,273,31,274,275,33],"12035261",6,"maker\u002Fpositive\u002Fnone","SEMW",[277,193,31,274,278,33],"12035673","jnmandal",[],[281,286,290,295,300,303],{"id":282,"name":283,"points":284,"category":285},"12030172","superslow",276,"learning_science",{"id":287,"name":288,"points":289,"category":19},"12014663","djent",275,{"id":291,"name":292,"points":293,"category":294},"12030423","Essential YouTube",110,"consumer_social",{"id":296,"name":297,"points":298,"category":299},"12018199","Readsure",104,"productivity",{"id":301,"name":302,"points":298,"category":294},"12033278","Maggie and Caleb wedding website",{"id":304,"name":305,"points":306,"category":307},"12016850","Affectiva YouTube demo",69,"ai",false,"v2",{"id":311,"name":5,"line":6,"ai":308,"cat":19,"year":12,"points":13,"comments":14,"rec":28,"s":312,"top":17,"kw":313,"maker":10,"domain":5,"tier":18,"attempts":33,"strip":314,"url":9,"mix":315,"praise":97,"objection":116,"sub":20},12035058,-0.17,[23,24,25,26,27],"553100510100000000000001001001310155",[31,32,33,34],1794036545626]