[{"data":1,"prerenderedAt":512},["ShallowReactive",2],{"project-4977845":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":46,"post_text":47,"what":48,"said":72,"maker_in_thread":194,"shape":206,"grid":211,"attempts":472,"same_week":477,"maker_shows":40,"maker_hidden":504,"reader_version":505,"card":506},"4977845","thegoodman","CSS3 animation","title","Show HN: CSS3 animation","http:\u002F\u002Fwww.thegoodman.cc\u002F","thegoodman.cc","podrivo",1356705946,2012,271,95,48,1677,3,"legend","creative","web animation","web_app",[24,25,21,26],"css3 animation","html5 animation","jquery animation","debated",0.007,{"positive":30,"neutral":31,"mixed":32,"critical":33},17,11,4,23,55,{"performance":36,"design":39,"idea":41,"execution":42,"docs":44},{"positive":37,"critical":38},2,14,{"positive":40,"critical":40},1,{"positive":40,"critical":37},{"positive":40,"critical":43},5,{"positive":40,"critical":45},0,[45,43,40,45,18,45,18,18,18,45,45,18,18,37,18,18,40,40,40,40,40,40,45,45,43,40,40,43,43,18,43,43,40,18,37,18,40,18,43,32],null,{"problem":47,"audience":47,"pricing":47,"motivation":49,"time_to_build":47,"stack":56,"openness":69,"stage":70,"team_size":71},{"value":50,"source":51,"evidence":52},"Wanted to study CSS animation by building it by hand","maker",[53],{"id":54,"by":11,"text":55},"4978328","I wanted to study it, so it was all hand coded.",[57,65],{"value":58,"source":59,"evidence":60},"CSS3","commenter",[61],{"id":62,"by":63,"text":64},"4978316","kitx","Firstly, this is fantastic. Really beautiful work and you've reframed what I thought was possible with CSS animations. The CSS is remarkably economical and I notice that you…",{"value":66,"source":59,"evidence":67},"jQuery",[68],{"id":62,"by":63,"text":64},"unknown","launched","solo",{"praise":73,"objections":90,"requests":142,"questions":156,"alternatives":168},[74,86],{"value":75,"source":59,"evidence":76},"Impressive, beautiful CSS3 animation work",[77,78,82],{"id":62,"by":63,"text":64},{"id":79,"by":80,"text":81},"4978185","lemcoe9","Most animation designers couldn't do this well in flash or something similar! Incredibly well-done.",{"id":83,"by":84,"text":85},"4978105","asc76","Wow. Impressive.",{"value":87,"source":59,"evidence":88},"Economical CSS and few dependencies",[89],{"id":62,"by":63,"text":64},[91,106,117,131],{"value":92,"source":59,"evidence":93},"Browser lockups in Firefox",[94,98,102],{"id":95,"by":96,"text":97},"4978284","RyanZAG","Don't try to open this page with Noscript enabled in Firefox - it locks up the browser. I'm guessing that without the javascript to control the CSS, everything runs amok. Seems…",{"id":99,"by":100,"text":101},"4978368","Hopka","I don't have NoScript and opening the page still made Firefox lock up. Flagged the submission because of that.",{"id":103,"by":104,"text":105},"4979680","saint-loup","It crashed immediately on my browser (Firefox 17 on Win7).",{"value":107,"source":59,"evidence":108},"Poor performance and choppy frame rate on some machines",[109,113],{"id":110,"by":111,"text":112},"4979867","snprbob86","Film is the high bar: The very best we can do with virtually infinite time and resources. You're totally ignoring the fact that we've got near film-quality, interactive 3D…",{"id":114,"by":115,"text":116},"4981170","beering","It's not enough to say that it runs smoothly for most of the animation. It should run smoothly for virtually every second of the animation. I have a computer that beats yours…",{"value":118,"source":59,"evidence":119},"Audio sync fails on mobile Safari and Android",[120,124,128],{"id":121,"by":122,"text":123},"4978675","geuis","@podrivo, looks cool. The audio never syncs up on mobile Safari though",{"id":125,"by":126,"text":127},"4978153","DoubleMalt","Without the intention to lessen what you did ... it's pretty laggy on my Galaxy Nexus in the default android browser. But cool stuff indeed.",{"id":129,"by":11,"text":130},"4978168","It's not ready for mobile... Audio gets unsynced and animations aren't smooth. :\u002F",{"value":132,"source":59,"evidence":133},"Only works well in Chrome",[134,138],{"id":135,"by":136,"text":137},"4978250","tarabukka",">You should try it on Chrome And people ask me why I keep calling Chrome the new Internet Explorer.",{"id":139,"by":140,"text":141},"4978488","gchucky","Because developing sites that work only in Chrome is similar to how sites used to be tailored to IE users. If we're all about interoperability and openness, having something that…",[143,150],{"value":144,"source":59,"evidence":145},"Add a progress indicator",[146],{"id":147,"by":148,"text":149},"4982571","charlieok","If I could make a suggestion for multimedia sequences like this, it would be to include some kind of progress indicator. When watching a video, it's always reassuring to be able…",{"value":151,"source":59,"evidence":152},"Support for other browsers such as Opera",[153],{"id":154,"by":11,"text":155},"4978527","i agreed. but this is an exception. its a experiment... as much as I want, this site will not work in opera. at least for now. :\u002F",[157,161],{"value":158,"source":59,"evidence":159},"How the keyframing and timing were done",[160],{"id":62,"by":63,"text":64},{"value":162,"source":59,"evidence":163},"Who the vocalist is",[164],{"id":165,"by":166,"text":167},"4978051","19_ploT","This was good. Who is the vocalist? Sounds like Michael Caine to me.",[169,176,183,190],{"value":170,"source":59,"evidence":171},"Radi",[172],{"id":173,"by":174,"text":175},"4979110","pavlov","I've been making a HTML5 animation app called Radi: http:\u002F\u002Fradiapp.com It's a free download. (Mac only, at least for now -- there's a rudimentary Windows port that I'm hoping to…",{"value":177,"source":59,"evidence":178},"Adobe Edge",[179],{"id":180,"by":181,"text":182},"4978279","ryanac","Edge: http:\u002F\u002Fhtml.adobe.com\u002Fedge A5: http:\u002F\u002Fwww.a5-animator.com Hippo: http:\u002F\u002Fhippostudios.co.uk Sencha Animator: http:\u002F\u002Fwww.sencha.com\u002Fproducts\u002Fanimator Motion Composer:…",{"value":184,"source":59,"evidence":185},"Flash",[186],{"id":187,"by":188,"text":189},"4979389","cnp","My first thought: Nice, well done, very clean, but compared to the stuff that was being done in Flash in 2001, the bar has been lowered so substantially it's as though Flash had…",{"value":191,"source":59,"evidence":192},"Tumult Hype",[193],{"id":180,"by":181,"text":182},{"comments":195,"answered":43,"key":196},13,[197,200,203],{"id":198,"text":199},"4978499","these tools are still in development, as well as the technology they are developed to. they are becoming popular. maybe in 2013! (:",{"id":201,"text":202},"4978379","I've separated the song in small scenes and animate them separately. There were storyboards too.",{"id":204,"text":205},"4978415","Maybe an issue related to prefix free and firefox?",{"commenters":207,"max_depth":208,"maker_replies":195,"first_comment_mins":209,"lifespan_hours":210},64,7,54,47,[212,215,219,221,225,227,230,234,238,242,245,247,250,253,257,259,263,266,270,271,274,276,279,282,285,287,290,293,295,298,302,304,307,309,312,314,316,319,321,322,323,326,327,329,330,333,336,338,340,342,344,345,347,350,353,356,359,362,364,368,369,370,372,375,377,382,386,389,392,395,398,400,402,404,408,411,415,416,418,421,425,428,431,432,436,437,442,444,449,452,456,458,461,465,469],[213,45,45,214,111,45],"4979388","other\u002Fcritical\u002Fidea",[216,45,45,217,218,45],"4979737","commenter\u002Fneutral\u002Fnone","kami8845",[110,45,45,220,111,45],"commenter\u002Fneutral\u002Fperformance",[222,45,43,223,224,45],"4980209","project\u002Fpositive\u002Fperformance","bryans",[114,45,40,226,115,45],"project\u002Fcritical\u002Fperformance",[228,45,40,226,229,45],"4981855","pretoriusB",[231,45,45,232,233,45],"4979960","other\u002Fneutral\u002Fnone","enra",[235,45,45,236,237,45],"4980026","other\u002Fneutral\u002Fidea","valgaze",[239,45,45,240,241,45],"4980499","commenter\u002Fneutral\u002Fidea","rorrr",[243,45,45,217,244,45],"4981185","Groxx",[187,40,18,246,188,45],"project\u002Fmixed\u002Fdesign",[248,40,45,232,249,45],"4979496","EwanG",[251,40,45,252,188,45],"4979537","other\u002Fpositive\u002Fnone",[254,40,45,255,256,45],"4980064","other\u002Fcritical\u002Fperformance","revelation",[258,40,45,240,188,45],"4980287",[260,40,18,261,262,45],"4982171","project\u002Fmixed\u002Fidea","madethemcry",[264,37,18,261,265,45],"4978177","coofluence",[267,37,18,268,269,45],"4978204","project\u002Fneutral\u002Fnone","MojoJolo",[180,37,45,232,181,45],[272,37,45,232,273,45],"4978298","rudasn",[275,37,18,268,174,45],"4979116",[277,37,45,232,278,45],"4978391","g2e",[280,37,45,232,281,45],"4978412","jQueryIsAwesome",[283,37,45,232,284,45],"4978449","bgilroy26",[198,37,45,286,11,40],"maker\u002Fneutral\u002Fnone",[288,37,45,232,289,45],"4978953","neovive",[291,37,45,214,292,45],"4979172","camus",[294,37,18,268,174,45],"4979301",[296,37,43,297,292,45],"4980624","project\u002Fpositive\u002Fnone",[299,37,40,300,301,45],"4982405","project\u002Fcritical\u002Fexecution","ncrit",[303,37,40,300,301,45],"4982423",[305,37,18,306,174,45],"4985584","maker\u002Fneutral\u002Fexecution",[173,37,18,308,174,45],"project\u002Fneutral\u002Fdesign",[310,37,18,306,311,45],"4979377","panabee",[313,37,18,306,174,45],"4979624",[315,37,18,268,265,45],"4982079",[317,37,40,318,265,45],"4981338","project\u002Fcritical\u002Fnone",[62,18,43,320,63,45],"maker\u002Fpositive\u002Fdesign",[201,18,45,286,11,40],[95,32,40,226,96,45],[324,32,40,226,325,45],"4978338","tekmate",[99,32,40,226,100,45],[328,32,40,226,96,45],"4978390",[204,32,45,306,11,40],[331,32,40,300,332,45],"4982160","zalew",[334,32,40,226,335,45],"4978452","ElliotH",[135,43,45,337,136,45],"other\u002Fcritical\u002Fnone",[339,43,45,217,11,40],"4978402",[341,43,40,300,136,45],"4978485",[154,43,45,343,11,40],"project\u002Fneutral\u002Fexecution",[139,43,40,300,140,45],[346,43,45,306,11,40],"4978511",[348,43,45,232,349,45],"4979606","FuzzyDunlop",[351,43,45,337,352,45],"4978433","rimantas",[354,43,45,337,355,45],"4981373","neumann_alfred",[357,43,45,232,358,45],"4979154","paranoiacblack",[360,43,45,232,361,45],"4979271","Yaggo",[363,43,45,232,361,45],"4979283",[365,366,43,297,367,45],"4979353",6,"BaconJuice",[125,208,40,226,126,45],[129,208,45,226,11,40],[371,208,45,217,126,45],"4978804",[373,208,40,226,374,45],"4982447","ttflee",[147,376,18,308,148,45],8,[378,379,43,380,381,45],"4981054",9,"project\u002Fpositive\u002Fidea","davmar",[383,384,43,297,385,45],"4981289",10,"RaSoJo",[387,31,18,388,269,45],"4978192","project\u002Fmixed\u002Fperformance",[390,31,43,223,391,45],"4978423","dan_m2k",[393,31,45,394,11,40],"4978541","project\u002Fneutral\u002Fperformance",[396,31,40,226,397,45],"4981975","g_lined",[165,399,43,297,166,45],12,[401,399,45,286,11,40],"4978119",[403,399,43,297,166,45],"4978130",[405,399,43,406,407,45],"4978397","maker\u002Fpositive\u002Fnone","gnufied",[409,399,45,217,410,45],"4978132","cleverjake",[412,195,18,413,414,45],"4978526","project\u002Fneutral\u002Fidea","jpb0104",[103,38,40,226,104,45],[417,38,45,394,11,40],"4979718",[419,38,40,226,420,45],"4981846","com2kid",[422,423,43,406,424,45],"4980655",15,"TommyDANGerous",[79,426,43,427,80,45],16,"project\u002Fpositive\u002Fexecution",[429,426,40,430,292,45],"4979155","project\u002Fcritical\u002Fidea",[121,30,40,226,122,45],[433,434,18,286,435,45],"4978291",18,"progolferyo",[54,434,45,286,11,40],[438,439,40,440,441,45],"4978431",19,"project\u002Fcritical\u002Fdesign","eriktrautman",[443,439,45,286,11,40],"4978448",[445,446,43,447,448,45],"4978394",20,"maker\u002Fpositive\u002Fdocs","tambourine_man",[450,446,45,451,11,40],"4978408","maker\u002Fneutral\u002Fdocs",[453,454,40,226,455,45],"4978990",21,"josephpmay",[83,457,43,297,84,45],22,[459,33,43,297,460,45],"4981553","tanvirjalal",[462,463,43,406,464,45],"4978260",24,"gcmartinelli",[466,467,43,297,468,45],"4978493",25,"mosselman",[470,471,40,430,292,45],"4980636",26,[473,476],{"id":474,"t":475,"points":18,"comments":40},"4916381",1355415998,{"id":4,"t":12,"points":14,"comments":15},[478,483,488,492,496,500],{"id":479,"name":480,"points":481,"category":482},"4974055","howacarworks.com",242,"dev_tools",{"id":484,"name":485,"points":486,"category":487},"4980220","Ninja Blocks",149,"hardware",{"id":489,"name":490,"points":491,"category":487},"4977548","Hacking a Raspberry Pi into a wireless airplay speaker",144,{"id":493,"name":494,"points":495,"category":482},"4997493","a small weekendish project",106,{"id":497,"name":498,"points":499,"category":20},"4979247","Harmogram",105,{"id":501,"name":502,"points":503,"category":20},"4980259","Nasdaq Dubstep",88,false,"v2",{"id":507,"name":5,"line":6,"ai":504,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":508,"top":18,"kw":509,"maker":11,"domain":10,"tier":19,"attempts":37,"strip":510,"url":9,"mix":511,"praise":75,"objection":92,"sub":21},4977845,0.01,[24,25,21,26],"0510303330033233111111005115535513231354",[30,31,32,33],1793990889202]