[{"data":1,"prerenderedAt":340},["ShallowReactive",2],{"project-8823938":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":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":42,"post_text":44,"what":45,"said":69,"maker_in_thread":171,"shape":173,"grid":177,"attempts":304,"same_week":305,"maker_shows":18,"maker_hidden":332,"reader_version":333,"card":334},"8823938","Snabbt.js","a minimalistic animation library","title","Show HN: Snabbt.js – a minimalistic animation library","http:\u002F\u002Fdaniel-lundin.github.io\u002Fsnabbt.js\u002Fcards.html","daniel-lundin.github.io","sBUWK",1420140530,2015,323,47,44,2565,2,"legend","dev_tools","javascript animation library","library",[24,25,26,27],"javascript animation","css transforms","requestanimationframe","animation library","mixed",0.208,{"positive":31,"neutral":32,"mixed":33,"critical":34},10,15,0,7,32,{"performance":37,"design":39,"idea":41},{"positive":18,"critical":38},1,{"positive":33,"critical":40},5,{"positive":33,"critical":33},[40,43,43,43,43,43,43,43,38,33,33,38,33,33,38,33,33,38,33,33,33,33,38,43,33,33,43,43,38,43,43,40,40,40,40,40,40,40,43,40],3,null,{"problem":44,"audience":46,"pricing":44,"motivation":44,"time_to_build":44,"stack":54,"openness":67,"stage":68,"team_size":68},{"value":47,"source":48,"evidence":49},"Front-end JavaScript developers","inferred",[50],{"id":51,"by":52,"text":53},"8825214","habosa","Extremely impressive demo. This is how a Show HN for a front-end library should always be: take me straight to a demo of the coolest part. What exactly makes this so fast? I'm…",[55,63],{"value":56,"source":57,"evidence":58},"JavaScript","commenter",[59],{"id":60,"by":61,"text":62},"8825869","leeoniya","what makes is fast is the use of requestAnimationFrame [1] (rather than setTimeout or setInterval) that exists in all modern browsers and simply applying css, letting the browser…",{"value":64,"source":57,"evidence":65},"CSS transforms",[66],{"id":60,"by":61,"text":62},"open_source","unknown",{"praise":70,"objections":90,"requests":122,"questions":137,"alternatives":149},[71,83],{"value":72,"source":57,"evidence":73},"Demo is very fast and smooth, impressive performance",[74,75,79],{"id":51,"by":52,"text":53},{"id":76,"by":77,"text":78},"8825393","supster","Jaw dropping demo, great work!",{"id":80,"by":81,"text":82},"8826143","GordyMD","This is incredibly impressive. Thank you for sharing.",{"value":84,"source":57,"evidence":85},"Small library size",[86],{"id":87,"by":88,"text":89},"8825406","paulrosenzweig","This is under 4kb.",[91,101,111,115],{"value":92,"source":57,"evidence":93},"Non-camelCase naming is unidiomatic for JavaScript",[94,98],{"id":95,"by":96,"text":97},"8825339","bsimpson","The demo is certainly impressive, but the API doesn't look very idiomatic: - JS is a camelCased language. While I certainly appreciate snake_case in Python, it doesn't belong in…",{"id":99,"by":96,"text":100},"8825638","I'm a big believer in consistent, readable codebases. Anything that doesn't make it easier to understand and improve the code shouldn't be occupying your headspace. You should…",{"value":102,"source":57,"evidence":103},"Allocates many typed arrays per tick, causing garbage",[104,108],{"id":105,"by":106,"text":107},"8825434","mattdesl","Nice library. The current implementation leads to a lot of garbage since you are allocating several typed arrays per tick for each tween. Also looks like gimbal lock and Euler…",{"id":109,"by":106,"text":110},"8825445","JS animations are inherently very fast, most likely because you're running a modern browser. :) The code is basically just computing a 4x4 matrix for each card per frame built up…",{"value":112,"source":57,"evidence":113},"Euler interpolation may cause gimbal lock in 3D rotations",[114],{"id":105,"by":106,"text":107},{"value":116,"source":57,"evidence":117},"Shapes distort when browser window is resized",[118],{"id":119,"by":120,"text":121},"8826995","burger_moon","Really impressive! I like this a lot. One thing I noted however, was when I resize and refresh to a smaller browser size the squares turn into long rectangles. Is there a way to…",[123,130],{"value":124,"source":57,"evidence":125},"Test with photos of varying quality",[126],{"id":127,"by":128,"text":129},"8826588","danatkinson","An impressive demo, but I'd like to see this being done with photos of varying quality and see how the performance fairs. I've got a Chrome extension that I could probably use…",{"value":131,"source":57,"evidence":132},"Show equivalent of createjs timeline",[133],{"id":134,"by":135,"text":136},"8825291","grandalf","how would one do the equivalent of the createjs timeline?",[138,142],{"value":139,"source":57,"evidence":140},"What makes it so fast?",[141],{"id":51,"by":52,"text":53},{"value":143,"source":57,"evidence":144},"How does it differ from famo.us?",[145],{"id":146,"by":147,"text":148},"8826824","rsp1984","This looks very similar to http:\u002F\u002Ffamo.us\u002F. What is the main difference of Snabbt.js as compared to famo.us?",[150,157,165],{"value":151,"source":57,"evidence":152},"Velocity.js",[153],{"id":154,"by":155,"text":156},"8825227","baskind","Velocity.js http:\u002F\u002Fjulian.com\u002Fresearch\u002Fvelocity\u002F is pretty damn good already and just 12kb Gzipped.",{"value":158,"source":57,"evidence":159},"famo.us",[160,161],{"id":146,"by":147,"text":148},{"id":162,"by":163,"text":164},"8827495","thomasfl","Obviously famo.us is more famous than snabbt.js. But seriously, they both do the same thing. Instead of using css transitions they both use request animation frames and then only…",{"value":166,"source":57,"evidence":167},"tweenr",[168],{"id":169,"by":106,"text":170},"8825451","Competition is healthy. :) https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftweenr Besides, different authors will tackle the problem a little differently.",{"comments":33,"answered":33,"key":172},[],{"commenters":174,"max_depth":34,"maker_replies":33,"first_comment_mins":175,"lifespan_hours":176},36,369,55,[178,180,182,185,187,190,192,193,197,200,202,206,210,212,214,217,220,221,224,227,231,234,236,239,241,244,247,249,250,251,255,257,258,261,262,266,268,272,276,280,282,286,289,291,295,297,301],[51,33,40,179,52,33],"project\u002Fpositive\u002Fperformance",[109,33,43,181,106,33],"project\u002Fneutral\u002Fperformance",[183,33,43,181,184,33],"8826201","Kiro",[186,33,43,181,106,33],"8827069",[188,33,43,181,189,33],"8827326","yesimahuman",[191,33,43,181,189,33],"8825500",[60,33,43,181,61,33],[194,38,43,195,196,33],"8826544","project\u002Fneutral\u002Fnone","wingerlang",[198,38,43,195,199,33],"8830620","huskyr",[95,18,38,201,96,33],"project\u002Fcritical\u002Fdesign",[203,18,33,204,205,33],"8825411","commenter\u002Fneutral\u002Fdesign","jplahn",[207,18,33,208,209,33],"8825461","other\u002Fneutral\u002Fnone","fivedogit",[211,18,38,201,106,33],"8825497",[213,18,33,204,205,33],"8825559",[215,18,33,208,216,33],"8825592","hnriot",[218,18,33,208,219,33],"8825655","frakkingcylons",[99,18,38,201,96,33],[222,18,33,208,223,33],"8825769","jhgg",[225,18,33,204,226,33],"8825838","debaserab2",[228,18,38,229,230,33],"8826812","maker\u002Fcritical\u002Fdesign","madeofpalk",[232,18,33,233,226,33],"8827456","commenter\u002Fneutral\u002Fnone",[235,18,33,204,230,33],"8827482",[237,18,33,204,238,33],"8828927","rodw",[240,18,33,204,230,33],"8828953",[242,18,33,204,243,33],"8825827","sillysaurus3",[245,18,33,204,246,33],"8827746","fourstar",[154,43,38,248,155,33],"project\u002Fcritical\u002Fnone",[87,43,43,195,88,33],[169,43,33,233,106,33],[252,253,33,208,254,33],"8825641",4,"thomasfoster96",[146,40,43,256,147,33],"project\u002Fneutral\u002Fidea",[162,40,43,256,163,33],[105,259,38,260,106,33],6,"project\u002Fcritical\u002Fperformance",[119,34,38,201,120,33],[263,264,43,195,265,33],"8828688",8,"teddyh",[127,267,43,181,128,33],9,[269,31,40,270,271,33],"8825988","project\u002Fpositive\u002Fnone","mackeian",[273,274,40,270,275,33],"8832888",11,"leventcemaydan",[277,278,40,270,279,33],"8825224",12,"bzalasky",[80,281,40,270,81,33],13,[283,284,40,270,285,33],"8825129",14,"Touche",[287,32,40,179,288,33],"8825336","hayksaakian",[76,290,40,270,77,33],16,[292,293,40,270,294,33],"8825210",17,"cannonpult",[134,296,43,256,135,33],18,[298,299,43,181,300,33],"8825487",19,"jbeja",[302,303,40,270,300,33],"8825269",20,[],[306,310,314,319,323,327],{"id":307,"name":308,"points":309,"category":20},"8840173","WordsAPI",263,{"id":311,"name":312,"points":313,"category":20},"8844723","Pgcli",227,{"id":315,"name":316,"points":317,"category":318},"8825308","awesome-remote-job",218,"productivity",{"id":320,"name":321,"points":322,"category":318},"8831950","Sitekite",114,{"id":324,"name":325,"points":326,"category":20},"8831912","Crapify",96,{"id":328,"name":329,"points":330,"category":331},"8840903","ChatSecure",74,"security_privacy",false,"v2",{"id":335,"name":5,"line":6,"ai":332,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":336,"top":18,"kw":337,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":338,"url":9,"mix":339,"praise":72,"objection":92,"sub":21},8823938,0.21,[24,25,26,27],"5333333310010010010000130033133555555535",[31,32,33,34],1793990917657]