[{"data":1,"prerenderedAt":267},["ShallowReactive",2],{"project-12202293":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":29,"sentiment":30,"stance_mix":31,"scored_comments":34,"aspects":35,"strip":42,"post_text":45,"what":46,"said":90,"maker_in_thread":183,"shape":194,"grid":198,"attempts":229,"same_week":230,"maker_shows":44,"maker_hidden":260,"reader_version":261,"card":262},"12202293","Bouncy Ball","A TodoMVC for web animation","title","Show HN: Bouncy Ball – A TodoMVC for web animation","http:\u002F\u002Fsparkbox.github.io\u002Fbouncy-ball\u002F","sparkbox.github.io","bryanbraun",1470059104,2016,85,16,450,2264,20,"notable","languages","animation demo","web_app",[24,25,26,27,28],"web animation","css animation","web animations api","greensock","javascript animation","debated",0.04,{"positive":32,"neutral":33,"mixed":33,"critical":32},4,1,10,{"execution":36,"idea":38,"performance":39,"docs":40},{"positive":37,"critical":32},0,{"positive":33,"critical":37},{"positive":33,"critical":37},{"positive":41,"critical":37},2,[33,33,37,33,37,37,43,43,37,37,33,37,43,44,44,43],5,3,null,{"problem":47,"audience":45,"pricing":45,"motivation":45,"time_to_build":45,"stack":53,"openness":88,"stage":89,"team_size":88},{"value":48,"source":49,"evidence":50},"Shows the same bouncing ball animation implemented across several web animation approaches for comparison","maker",[51],{"id":52},"post",[54,62,66,70,74,81],{"value":55,"source":56,"evidence":57},"Web Animations API","commenter",[58],{"id":59,"by":60,"text":61},"12204073","lojack","Noticing some artifacts in Web Animations API, Greensock, Vanilla JS, and CSS. Looks like a single 1px line above\u002Fbelow the ball. Wonder what the cause of it is. Using Chrome on…",{"value":63,"source":56,"evidence":64},"GreenSock",[65],{"id":59,"by":60,"text":61},{"value":67,"source":56,"evidence":68},"Vanilla JS",[69],{"id":59,"by":60,"text":61},{"value":71,"source":56,"evidence":72},"CSS",[73],{"id":59,"by":60,"text":61},{"value":75,"source":56,"evidence":76},"jQuery",[77],{"id":78,"by":79,"text":80},"12204412","acangiano","The jQuery version has artificacts for me on mobile (iPhone 6s Plus with Safari). Nevertheless, I like the idea. Well done.",{"value":82,"source":56,"evidence":83},"Velocity",[84],{"id":85,"by":86,"text":87},"12204577","pests","Vanilla JS, CSS, Velocity, and Web Animations API are not working for me. Greeksock didn't work at first but enough clicks later it worked. Sometimes I'd see the ball for a few…","unknown","launched",{"praise":91,"objections":108,"requests":132,"questions":144,"alternatives":160},[92,103],{"value":93,"source":56,"evidence":94},"Clean, well-presented, and easy to use",[95,99],{"id":96,"by":97,"text":98},"12204032","maxwelljoslyn","Good work. Clean, well-presented, well-commented, and easy to use.",{"id":100,"by":101,"text":102},"12203057","intruder","Very neat. Thank you for such a nice overview.",{"value":104,"source":56,"evidence":105},"Good idea and nice overview of techniques",[106,107],{"id":78,"by":79,"text":80},{"id":100,"by":101,"text":102},[109,117,121,125],{"value":110,"source":56,"evidence":111},"Rendering artifacts such as a stray 1px line in Chrome on OSX",[112,113],{"id":59,"by":60,"text":61},{"id":114,"by":115,"text":116},"12204863","polysaturate","I am experiencing the same exact combination here. Chrome OSX as well.",{"value":118,"source":56,"evidence":119},"Animations not working in some browsers (Firefox on Ubuntu)",[120],{"id":85,"by":86,"text":87},{"value":122,"source":56,"evidence":123},"Artifacts on mobile Safari with the jQuery version",[124],{"id":78,"by":79,"text":80},{"value":126,"source":56,"evidence":127},"Inconsistent timing curves across variants",[128],{"id":129,"by":130,"text":131},"12204022","stevejohnson","One issue here is there's no exact test case. As a result, all variants seem to use slightly different timing curves. Maybe that's irrelevant, but it's at least annoying to look…",[133,137],{"value":134,"source":56,"evidence":135},"Use a consistent timing curve across variants",[136],{"id":129,"by":130,"text":131},{"value":138,"source":56,"evidence":139},"Add an Elm version",[140],{"id":141,"by":142,"text":143},"12204763","frou_dh","There could be a solution using elm-lang as a curveball. Graphics seem up its alley.",[145,149],{"value":146,"source":56,"evidence":147},"What causes the stray line artifact",[148],{"id":59,"by":60,"text":61},{"value":150,"source":56,"evidence":151},"Whether phones benefit from hardware acceleration",[152,156],{"id":153,"by":154,"text":155},"12203621","artursapek","Do phones benefit from hardware acceleration?",{"id":157,"by":158,"text":159},"12203777","jeffhuys","Yeah, they most certainly do.",[161,176,179],{"value":162,"source":56,"evidence":163},"Raw CSS animations",[164,168,172],{"id":165,"by":166,"text":167},"12203338","NikhilVerma","On a similar note I was trying to make more cartoony animations with CSS: http:\u002F\u002Fjsbin.com\u002Fravic\u002F42",{"id":169,"by":170,"text":171},"12206248","WheelsAtLarge","Nice, thanks for the demo. I used to be a web developer awhile back but had no idea you could do this type of animation with pure css. Looks like I need to refresh my skills.",{"id":173,"by":174,"text":175},"12203590","hiven","CSS seems the smoothest on my phone",{"value":63,"source":56,"evidence":177},[178],{"id":59,"by":60,"text":61},{"value":180,"source":56,"evidence":181},"Velocity.js",[182],{"id":85,"by":86,"text":87},{"comments":44,"answered":37,"key":184},[185,188,191],{"id":186,"text":187},"12205887","I've got Chrome on OSX but I can't see it. What color line are you seeing? Maybe you can drop a screenshot into an issue on github?…",{"id":189,"text":190},"12205779","Yeah, there's definitely room for refinement there. It's a bit tricky since different libraries support different easings (and the interfaces vary widely).",{"id":192,"text":193},"12205759","Oh interesting. I'll look into that.",{"commenters":195,"max_depth":44,"maker_replies":44,"first_comment_mins":196,"lifespan_hours":197},14,96,8,[199,201,202,204,205,207,209,211,213,215,216,217,219,222,225,227],[59,37,33,200,60,37],"project\u002Fcritical\u002Fexecution",[114,37,33,200,115,37],[186,37,37,203,11,33],"commenter\u002Fneutral\u002Fexecution",[129,33,33,200,130,37],[189,33,37,206,11,33],"project\u002Fneutral\u002Fexecution",[165,41,37,208,166,37],"other\u002Fneutral\u002Fnone",[169,44,43,210,170,37],"project\u002Fpositive\u002Fidea",[173,32,43,212,174,37],"project\u002Fpositive\u002Fperformance",[153,32,37,214,154,37],"other\u002Fneutral\u002Fperformance",[157,32,37,214,158,37],[85,43,33,200,86,37],[192,43,37,218,11,33],"maker\u002Fneutral\u002Fexecution",[100,220,43,221,101,37],6,"maker\u002Fpositive\u002Fdocs",[78,223,44,224,79,37],7,"project\u002Fmixed\u002Fperformance",[141,197,44,226,142,37],"project\u002Fneutral\u002Fidea",[96,228,43,221,97,37],9,[],[231,236,241,246,251,255],{"id":232,"name":233,"points":234,"category":235},"12211754","Noms",508,"data",{"id":237,"name":238,"points":239,"category":240},"12209595","Sharingbuttons.io",350,"dev_tools",{"id":242,"name":243,"points":244,"category":245},"12209889","Lambda School",220,"learning_science",{"id":247,"name":248,"points":249,"category":250},"12182581","wireframe-world",181,"creative",{"id":252,"name":253,"points":254,"category":245},"12194010","Apple",172,{"id":256,"name":257,"points":258,"category":259},"12209910","Amium",168,"productivity",false,"v2",{"id":263,"name":5,"line":6,"ai":260,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":30,"top":18,"kw":264,"maker":11,"domain":10,"tier":19,"attempts":37,"strip":265,"url":9,"mix":266,"praise":93,"objection":110,"sub":21},12202293,[24,25,26,27,28],"1101005500105335",[32,33,33,32],1794036546384]