[{"data":1,"prerenderedAt":404},["ShallowReactive",2],{"project-28616043":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":44,"post_text":46,"what":47,"said":84,"maker_in_thread":211,"shape":222,"grid":226,"attempts":366,"same_week":367,"maker_shows":37,"maker_hidden":396,"reader_version":397,"card":398},"28616043","Motion One","New animation library, built on the Web Animations API","title","Show HN: Motion One – New animation library, built on the Web Animations API","https:\u002F\u002Fmotion.dev\u002F","motion.dev","SirHound",1632317230,2021,327,58,104,2533,5,"legend","languages","animation library","library",[24,25,21,26],"web animations api","javascript animation","waapi","curious",-0.049,{"positive":30,"neutral":31,"mixed":32,"critical":33},4,18,0,8,30,{"docs":36,"idea":38,"execution":40,"performance":41,"design":42,"pricing":43},{"positive":32,"critical":37},2,{"positive":39,"critical":32},1,{"positive":32,"critical":18},{"positive":32,"critical":32},{"positive":39,"critical":32},{"positive":39,"critical":39},[32,45,32,32,45,32,45,39,45,32,45,18,39,18,45,39,32,45,32,39,32,45,32,32,45,45,45,32,45,32,39,45,32,45,18,45,39,39,32,45],3,null,{"problem":48,"audience":46,"pricing":55,"motivation":64,"time_to_build":46,"stack":68,"openness":81,"stage":82,"team_size":83},{"value":49,"source":50,"evidence":51},"Browser WAAPI is inconsistent across browsers and has awkward concepts like fill mode","maker",[52],{"id":53,"by":11,"text":54},"28616114","Hi HN! I'm Matt, author of Framer Motion and Popmotion. Today I'm launching my new side-project, Motion One. It's a new animation library built on the Web Animations API (WAAPI).…",{"value":56,"source":50,"evidence":57},"Source code for sponsors on GitHub; library is MIT licensed and free via npm",[58,61],{"id":59,"by":11,"text":60},"28619275","I'm not looking to block anyone. I want this to be open. And I don't want a confusing license. The code is pretty unobscured on npm so its less convenient but the source is free…",{"id":62,"by":11,"text":63},"28619319","Yeah that's fine. But repo access is more a convenience upsell, you can always get the source code (or pretty close transpiled code) from the npm distribution.",{"value":65,"source":50,"evidence":66},"Started as a book, then wanted to smooth over WAAPI inconsistencies",[67],{"id":53,"by":11,"text":54},[69,77],{"value":70,"source":71,"evidence":72},"JavaScript","inferred",[73],{"id":74,"by":75,"text":76},"28619951","Guidii","Hi there Matt - this looks like an amazing library - thanks for posting. I’m part of the Blink Animations team that work on WAAPI (along with a bunch of folks from other…",{"value":78,"source":50,"evidence":79},"Web Animations API",[80],{"id":53,"by":11,"text":54},"open_source","launched","solo",{"praise":85,"objections":106,"requests":137,"questions":157,"alternatives":184},[86,102],{"value":87,"source":88,"evidence":89},"Clean, simple API and nice documentation","commenter",[90,94,98],{"id":91,"by":92,"text":93},"28616953","swlkr","I think sponsorship to access the github repo is smart. This is similar to what the alpinejs creator did with his \"sponsorware\" approach. The animations api looks very simple as…",{"id":95,"by":96,"text":97},"28625246","kennethh","Pretty cool and nice documentation. I liked the sandbox to run the samples, anyone know what library that is used for it?",{"id":99,"by":100,"text":101},"28619394","wcarss","This looks really nice! 2 bits of feedback: - hitting 'play' on your site's demo animations is adding pageviews to my history, which made getting back here to leave feedback…",{"value":103,"source":50,"evidence":104},"Small bundle size compared to alternatives",[105],{"id":53,"by":11,"text":54},[107,115,126],{"value":108,"source":88,"evidence":109},"Site bugs: back button hijacked, play button adds history entries",[110,114],{"id":111,"by":112,"text":113},"28618859","andrewnc","The website hijacked the \"back\" functionality of my browser. Not a fan of that.",{"id":99,"by":100,"text":101},{"value":116,"source":88,"evidence":117},"Broken or janky demos on iOS Safari",[118,122],{"id":119,"by":120,"text":121},"28629692","FractalHQ","The last three examples in the guide don’t work on my iOS Safari. “Options” and “Keyframes” don’t respond, and “Stagger” shows the boxes instantly teleporting. Also, the home…",{"id":123,"by":124,"text":125},"28620295","tartoran","Safari on IOs",{"value":127,"source":88,"evidence":128},"Lack of demos on the front page",[129,133],{"id":130,"by":131,"text":132},"28624642","andrewstuart","My primary measure of interest in animation libraries is demonstrations\u002Fshowcases of the library in action. I could see nothing like this on the front page so I closed it. I'd…",{"id":134,"by":135,"text":136},"28621453","cdubzzz","Looks very interesting -- it would be nice to have more playground\u002Fdemos. Both of the front page and in the documentation (like what is on the Quick Start page, essentially).",[138,143,150],{"value":139,"source":88,"evidence":140},"More demos and playground examples",[141,142],{"id":130,"by":131,"text":132},{"id":134,"by":135,"text":136},{"value":144,"source":88,"evidence":145},"Scroll-linked animation support",[146],{"id":147,"by":148,"text":149},"28617500","yunusabd","Very nice! I recently updated my website traveldays.com with an SVG path animation. The effect is bound to the scroll progress. It looks like you don't support scroll animations…",{"value":151,"source":88,"evidence":152},"Animate plain values not only DOM elements",[153],{"id":154,"by":155,"text":156},"28626605","drewrbaker","Hi Matt, loved to see this. Suggestion: it would be great if we could use this to animate a value rather than requiring it to be on a DOM object (or selector). When using this…",[158,173],{"value":159,"source":88,"evidence":160},"How does it differ from CSS animations and Framer Motion",[161,165,169],{"id":162,"by":163,"text":164},"28618091","seph-reed","I'm confused about what this does above & beyond css animations\u002Ftransitions.",{"id":166,"by":167,"text":168},"28619047","neolander","What's the difference between this and something like Framer Motion?",{"id":170,"by":171,"text":172},"28626572","cristicismas","This looks great! I've used framer-motion in the past and it was great. Could you tell us how Motion One compares to framer-motion?",{"value":174,"source":88,"evidence":175},"How the sponsorship-gated repo works with MIT license",[176,180],{"id":177,"by":178,"text":179},"28618807","jaredchung","How exactly does that work with the MIT license? If someone sponsors and gains access to the repo, they're permitted to fork and redistribute the code, right?",{"id":181,"by":182,"text":183},"28619038","jamestanderson","Nothing in the MIT license prevents you from doing that. But the author could disable your access to the repo any time, and once that happens, your fork would be forever out of…",[185,189,196,200,204],{"value":186,"source":88,"evidence":187},"Framer Motion",[188],{"id":166,"by":167,"text":168},{"value":190,"source":88,"evidence":191},"Popmotion",[192],{"id":193,"by":194,"text":195},"28617772","lbotos","You mention here and on the homepage you are the author of Framer Motion and Popmotion but in neither place are there links to those projects. I'd love to check them out so if…",{"value":197,"source":50,"evidence":198},"GreenSock",[199],{"id":53,"by":11,"text":54},{"value":201,"source":50,"evidence":202},"Anime.js",[203],{"id":53,"by":11,"text":54},{"value":205,"source":88,"evidence":206},"Lottie",[207],{"id":208,"by":209,"text":210},"28621037","flixic","In many cases, \"animations on the web\" has become Lottie animations. Or, at least, Lottie raises the bar for animation expectations. I'd love to see two things: - A decent free…",{"comments":212,"answered":213,"key":214},21,7,[215,216,219],{"id":53,"text":54},{"id":217,"text":218},"28619219","Ah apologises I just wanted to reduce the number of \"off ramps\" and as the other comment says, I am sort of assuming that people might be familiar with them but indeed they might…",{"id":220,"text":221},"28619401","Imperative JS libraries are more convenient to schedule and dynamically generate animations, but above and beyond that this offers timeline sequencing for long animation…",{"commenters":223,"max_depth":18,"maker_replies":212,"first_comment_mins":224,"lifespan_hours":225},33,6,47,[227,229,231,235,238,239,241,244,245,246,248,250,253,256,259,260,262,266,268,270,272,275,278,280,281,282,286,288,291,293,296,299,301,305,309,311,314,317,320,322,324,327,329,331,333,335,337,339,341,343,346,348,350,352,355,358,360,361],[53,32,32,228,11,39],"maker\u002Fpositive\u002Fidea",[193,32,45,230,194,32],"maker\u002Fneutral\u002Fdocs",[232,32,32,233,234,32],"28618339","commenter\u002Fneutral\u002Fnone","hezag",[236,32,32,233,237,32],"28619057","oefrha",[217,32,32,230,11,39],[162,32,45,240,163,32],"project\u002Fneutral\u002Fidea",[242,32,45,240,243,32],"28618330","cyral",[220,32,32,240,11,39],[166,32,45,240,167,32],[247,32,32,240,11,39],"28619200",[99,32,39,249,100,32],"project\u002Fcritical\u002Fexecution",[251,32,32,252,11,39],"28619511","maker\u002Fneutral\u002Fnone",[254,32,45,255,100,32],"28619681","project\u002Fneutral\u002Fperformance",[257,32,32,258,11,39],"28620093","maker\u002Fneutral\u002Fexecution",[74,32,45,255,75,32],[261,32,32,233,11,39],"28620279",[263,32,18,264,265,32],"28622813","project\u002Fpositive\u002Fdesign","RobLach",[130,32,39,267,131,32],"project\u002Fcritical\u002Fdocs",[91,39,18,269,92,32],"project\u002Fpositive\u002Fpricing",[177,39,45,271,178,32],"project\u002Fneutral\u002Fpricing",[273,39,45,271,274,32],"28618957","mritchie712",[276,39,32,277,11,39],"28619277","commenter\u002Fneutral\u002Fpricing",[181,39,39,279,182,32],"project\u002Fcritical\u002Fpricing",[59,39,32,271,11,39],[62,39,32,271,11,39],[283,37,45,284,285,32],"28618156","project\u002Fneutral\u002Fnone","benatkin",[287,37,32,284,11,39],"28619346",[289,45,39,267,290,32],"28625291","chrismorgan",[292,45,32,255,11,39],"28626610",[294,45,32,295,290,32],"28629477","commenter\u002Fneutral\u002Fperformance",[297,30,45,271,298,32],"28617293","jansan",[208,18,32,300,209,32],"other\u002Fneutral\u002Fnone",[302,18,32,303,304,32],"28623270","other\u002Fneutral\u002Fperformance","andrewingram",[306,18,32,307,308,32],"28625868","other\u002Fneutral\u002Fdocs","mkl",[310,18,32,284,11,39],"28626396",[312,224,45,255,313,32],"28621450","ex3ndr",[315,213,45,240,316,32],"28622188","gugagore",[318,33,45,319,290,32],"28625424","project\u002Fneutral\u002Fdocs",[147,321,45,284,148,32],9,[323,321,32,284,11,39],"28619449",[325,321,32,300,326,32],"28620919","SwiftyBug",[154,328,45,240,155,32],10,[330,328,32,240,11,39],"28626629",[119,332,39,249,120,32],11,[334,332,32,258,11,39],"28629737",[336,332,45,258,120,32],"28629777",[338,332,32,252,11,39],"28630307",[134,340,45,319,135,32],12,[342,340,32,319,11,39],"28625281",[170,344,18,345,171,32],13,"project\u002Fpositive\u002Fidea",[95,347,45,319,96,32],14,[349,347,32,319,11,39],"28641343",[111,351,39,249,112,32],15,[353,351,32,354,11,39],"28619361","project\u002Fneutral\u002Fexecution",[356,357,39,249,124,32],"28617428",16,[359,357,32,258,11,39],"28619453",[123,357,39,249,124,32],[362,363,18,364,365,32],"28617015",17,"project\u002Fpositive\u002Fnone","beebeepka",[],[368,373,377,382,386,391],{"id":369,"name":370,"points":371,"category":372},"28595967","hacker-recommended-books",1359,"learning_science",{"id":374,"name":375,"points":376,"category":372},"28585208","libgen.fun",452,{"id":378,"name":379,"points":380,"category":381},"28587458","I built four eight-foot-long handwriting robots",408,"hardware",{"id":383,"name":384,"points":385,"category":20},"28600804","7GUIs in Vanilla HTML, CSS, JavaScript",144,{"id":387,"name":388,"points":389,"category":390},"28617596","Noteship",128,"productivity",{"id":392,"name":393,"points":394,"category":395},"28589842","Errorpush",124,"dev_tools",false,"v2",{"id":399,"name":5,"line":6,"ai":396,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":400,"top":18,"kw":401,"maker":11,"domain":10,"tier":19,"attempts":32,"strip":402,"url":9,"mix":403,"praise":87,"objection":108,"sub":21},28616043,-0.05,[24,25,21,26],"0300303130351531030103003330301303531103",[30,31,32,33],1794036611482]