[{"data":1,"prerenderedAt":402},["ShallowReactive",2],{"project-29924666":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":35,"aspects":36,"strip":44,"post_text":47,"what":48,"said":87,"maker_in_thread":200,"shape":210,"grid":214,"attempts":364,"same_week":365,"maker_shows":46,"maker_hidden":395,"reader_version":396,"card":397},"29924666","Animatize","Create animations by dragging an element with your mouse","title","Show HN: Create animations by dragging an element with your mouse","https:\u002F\u002Fanimatize.com\u002F","animatize.com","panphora",1642098892,2022,379,57,93,2570,4,"legend","creative","animation tool","web_app",[24,25,26,27,28],"animation","mouse animation","motion sketch","web animation","html5 animation","mixed",0.34,{"positive":32,"neutral":33,"mixed":34,"critical":18},14,12,2,32,{"idea":37,"execution":40,"privacy":42,"design":43},{"positive":38,"critical":39},7,1,{"positive":41,"critical":34},0,{"positive":41,"critical":39},{"positive":34,"critical":41},[41,45,45,39,45,46,45,41,41,41,41,41,45,41,46,46,45,45,41,46,46,46,41,46,41,45,39,41,41,45,39,41,46,41,45,46,41,45,46,45],5,3,null,{"problem":49,"audience":56,"pricing":47,"motivation":65,"time_to_build":69,"stack":75,"openness":84,"stage":85,"team_size":86},{"value":50,"source":51,"evidence":52},"Creating animations without learning complex tools like After Effects","maker",[53],{"id":54,"by":11,"text":55},"29924699","Hi HN, This idea has been a dream of mine for years [0]. As a web developer, I never learned After Effects or any other complex animation software. But I've always dreamed of…",{"value":57,"source":58,"evidence":59},"Web developers and creators making small animations","inferred",[60,61],{"id":54,"by":11,"text":55},{"id":62,"by":63,"text":64},"29931141","santa_boy","Thanks a lot. This is as tiny and as productive animations could get. I'm literally tired of opening applications to do small animation pizzaz. Spent more $ on animation creators…",{"value":66,"source":51,"evidence":67},"Wanted to create interactive animations using natural mouse movements instead of complex software",[68],{"id":54,"by":11,"text":55},{"value":70,"source":51,"evidence":71},"About 18 hours of work over one week",[72],{"id":73,"by":11,"text":74},"29929273","I did. It's been one of my better decisions. I have so many projects that are 80% complete that I've just been too embarrassed to post. 31 launches is meant to help me get past…",[76],{"value":77,"source":78,"evidence":79},"JavaScript","commenter",[80],{"id":81,"by":82,"text":83},"29927901","uxamanda","Not OP, but I thought you might be able to use a canvas export, but alas the output is still javascript. My quick hack on a Mac would be QuickTime screen record + ffmpeg :-)","open_source","prototype","solo",{"praise":88,"objections":120,"requests":136,"questions":168,"alternatives":177},[89,109],{"value":90,"source":78,"evidence":91},"Simple, quick and effective way to make animations",[92,96,97,101,105],{"id":93,"by":94,"text":95},"29924739","themodelplumber","What a cool project. You can really fit a lot of concepts into such a refined approach to animation. Thank you for sharing your result with us, I hope you are having fun with it…",{"id":62,"by":63,"text":64},{"id":98,"by":99,"text":100},"29931273","DarthNebo","This is really amazing! There's a steep learning curve to do creative work & this is certainly a step in the right direction of WYSIWYG instead of needing to know tool specific…",{"id":102,"by":103,"text":104},"29932024","123pie123","thanks - love it, nice, simple and effective",{"id":106,"by":107,"text":108},"29929575","pizzabearman","I love the how quick and easy it gets right to the point",{"value":110,"source":78,"evidence":111},"Reminds commenters of tools like Motion Sketch and Flash-era tools",[112,116],{"id":113,"by":114,"text":115},"29931993","Keyframe","FWIW it's called Motion sketch in After effects and it's basically the same thing. It allows you to edit the curve after though.",{"id":117,"by":118,"text":119},"29928585","ricardobeat","Has anyone tried to create a modern version of Flash \u002F Director? Feels like those tools had already solved these problems nicely 20 years ago.",[121,129],{"value":122,"source":78,"evidence":123},"Output is raw JavaScript and hard to share as a GIF",[124,128],{"id":125,"by":126,"text":127},"29925473","Linkd","Love it, but this needs to be able to output GIFs I can easily copy and share on slack, etc. (Unless I missed out how to do that entirely?)",{"id":81,"by":82,"text":83},{"value":130,"source":78,"evidence":131},"Movement is shaky without smoothing",[132],{"id":133,"by":134,"text":135},"29931140","mrhektor","This is such a cool project. Quick suggestion: would be nice to have some way of \"smoothening\" the animations; I think a simple interface for that would make it a lot more usable…",[137,145,149,157],{"value":138,"source":78,"evidence":139},"Export to GIF",[140,141],{"id":125,"by":126,"text":127},{"id":142,"by":143,"text":144},"29926983","sarwech","This is really cool. As others have said I'd love to see an option to output a GIF and additional animation options.",{"value":146,"source":78,"evidence":147},"Smoothing of mouse movement",[148],{"id":133,"by":134,"text":135},{"value":150,"source":78,"evidence":151},"More animation options such as pause, scale and rotate",[152,156],{"id":153,"by":154,"text":155},"29925326","cuttysnark","This is great. Do you have plans to expand the controls or animation options? For example, adding pauses, or additional animation types like scale or rotate. Thanks for sharing…",{"id":142,"by":143,"text":144},{"value":158,"source":78,"evidence":159},"Speed control and SVG support",[160,164],{"id":161,"by":162,"text":163},"29928340","somishere","SVG would be cool too :)",{"id":165,"by":166,"text":167},"29962895","pdm55","I want to change the speed. [Edit: Now I see that I can vary the speed in my initial drag.] Have securtiy concerns putting this on my website. Can nasties be hidden in the code?",[169,173],{"value":170,"source":78,"evidence":171},"Whether animations can be exported as GIF or shared easily",[172],{"id":125,"by":126,"text":127},{"value":174,"source":78,"evidence":175},"Whether the embedded code could hide malicious content",[176],{"id":165,"by":166,"text":167},[178,186,193],{"value":179,"source":78,"evidence":180},"After Effects Motion Sketch",[181,182],{"id":113,"by":114,"text":115},{"id":183,"by":184,"text":185},"29931434","dorkwood","After Effects has a feature called \"motion sketch\" which does this for video. It's a little bit harder to get up and running, though.",{"value":187,"source":78,"evidence":188},"Cartooners",[189],{"id":190,"by":191,"text":192},"29932052","micheljansen","Lovely! This reminds me to Cartooners [1], a related but totally different game\u002Ftoy that I lost many rainy days to as a kid. It was a DOS Application with a library of scenes and…",{"value":194,"source":78,"evidence":195},"OpenShot Video",[196],{"id":197,"by":198,"text":199},"29933131","ljm","This is nice, it reminds me of how OpenShot Video handles animations by default.",{"comments":201,"answered":18,"key":202},9,[203,204,207],{"id":54,"text":55},{"id":205,"text":206},"29929338","This sounds like a great real-time teaching style. Can you point us to the videos you're talking about?",{"id":208,"text":209},"29929217","That's how I generated the red dots in the demo at the top of the page actually! I rendered one dot for every 10 movements and then ran some JS that would delete any element I…",{"commenters":211,"max_depth":212,"maker_replies":201,"first_comment_mins":46,"lifespan_hours":213},45,6,111,[215,217,219,220,221,223,225,227,230,233,237,239,242,245,248,251,254,257,259,261,264,266,269,270,274,277,279,281,283,284,286,289,291,294,295,297,299,301,303,304,308,310,313,318,320,323,327,331,335,340,344,345,348,350,352,356,360],[54,41,41,216,11,39],"maker\u002Fneutral\u002Fidea",[93,41,45,218,94,41],"project\u002Fpositive\u002Fidea",[62,41,45,218,63,41],[98,41,45,218,99,41],[113,41,39,222,114,41],"project\u002Fcritical\u002Fidea",[102,41,45,224,103,41],"project\u002Fpositive\u002Fnone",[133,39,46,226,134,41],"project\u002Fneutral\u002Fexecution",[228,39,46,226,229,41],"29931621","heleninboodler",[231,34,45,218,232,41],"29926879","daenz",[234,34,41,235,236,41],"29929142","other\u002Fneutral\u002Fnone","wraptile",[205,34,41,238,11,39],"commenter\u002Fneutral\u002Fnone",[240,34,41,235,241,41],"29929461","woojoo666",[243,34,41,235,244,41],"29931826","leobg",[246,34,41,238,247,41],"29932481","mdrzn",[249,34,41,235,250,41],"29942198","riidom",[252,34,41,235,253,41],"29933531","scrollaway",[255,34,41,235,256,41],"29930086","gamerDude",[258,46,45,218,82,41],"29927876",[208,46,41,260,11,39],"maker\u002Fneutral\u002Fnone",[262,46,46,260,263,41],"29931773","CamelRocketFish",[265,46,41,235,82,41],"29937514",[267,18,46,260,268,41],"29925864","cercatrova",[73,18,41,260,11,39],[271,18,45,272,273,41],"29931591","maker\u002Fpositive\u002Fnone","anthonyjdella",[275,45,45,218,276,41],"29926550","can16358p",[278,45,41,260,11,39],"29929237",[280,45,41,235,276,41],"29933544",[125,212,46,282,126,41],"project\u002Fmixed\u002Fexecution",[81,212,46,226,82,41],[161,212,46,285,162,41],"project\u002Fneutral\u002Fidea",[287,212,46,285,288,41],"29930545","dane-pgp",[290,212,41,260,11,39],"29929328",[292,212,46,260,293,41],"29931372","fourteenfour",[153,38,46,285,154,41],[296,38,41,260,11,39],"29929286",[142,298,45,224,143,41],8,[300,298,41,260,11,39],"29929311",[165,298,39,302,166,41],"project\u002Fcritical\u002Fprivacy",[190,201,41,235,191,41],[305,306,41,235,307,41],"29930285",10,"toisanji",[117,309,41,235,118,41],11,[311,33,45,218,312,41],"29977075","roguas",[314,315,39,316,317,41],"29931246",13,"project\u002Fcritical\u002Fexecution","sucrose",[319,315,39,316,317,41],"29931282",[321,315,41,322,11,39],"29937100","maker\u002Fneutral\u002Fexecution",[324,32,46,325,326,41],"29932219","project\u002Fmixed\u002Fidea","TuringTest",[328,329,41,235,330,41],"29932440",15,"howaboutnope",[332,333,41,235,334,41],"29932233",16,"rjtavares",[336,337,45,338,339,41],"29924715",17,"project\u002Fpositive\u002Fdesign","appliku",[341,342,46,285,343,41],"29927398",18,"tehwebguy",[183,342,41,235,184,41],[346,342,41,235,347,41],"29933777","sergei_ws",[197,349,46,285,198,41],19,[106,351,45,338,107,41],20,[353,354,46,285,355,41],"29932476",21,"natovan",[357,358,45,272,359,41],"29928096",22,"indiantinker",[361,362,45,224,363,41],"29925680",23,"sam1234apter",[],[366,371,376,381,386,391],{"id":367,"name":368,"points":369,"category":370},"29921419","Looptap",1241,"games",{"id":372,"name":373,"points":374,"category":375},"29923736","Login with HN",436,"security_privacy",{"id":377,"name":378,"points":379,"category":380},"29938520","RootMy.TV",361,"hardware",{"id":382,"name":383,"points":384,"category":385},"29978659","Matrix-CRDT",320,"languages",{"id":387,"name":388,"points":389,"category":390},"29959129","My 486 Server",255,"infrastructure",{"id":392,"name":393,"points":394,"category":20},"29921137","Brutalita",243,false,"v2",{"id":398,"name":5,"line":6,"ai":395,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":30,"top":18,"kw":399,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":400,"url":9,"mix":401,"praise":90,"objection":122,"sub":21},29924666,[24,25,26,27,28],"0551535000005033550333030510051030530535",[32,33,34,18],1794036615686]