[{"data":1,"prerenderedAt":307},["ShallowReactive",2],{"project-9458268":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":34,"aspects":35,"strip":42,"post_text":45,"what":46,"said":72,"maker_in_thread":160,"shape":171,"grid":175,"attempts":268,"same_week":269,"maker_shows":44,"maker_hidden":299,"reader_version":300,"card":301},"9458268","Ramjet.js","Morph DOM elements into each other","title","Show HN: Ramjet.js – Morph DOM elements into each other","http:\u002F\u002Fwww.rich-harris.co.uk\u002Framjet\u002F","rich-harris.co.uk","rich_harris",1430316024,2015,309,35,48,2565,2,"legend","languages","javascript animation library","library",[24,25,26,27],"dom animation","javascript transitions","element morphing","css transforms","loved",0.472,{"positive":31,"neutral":32,"mixed":18,"critical":33},11,6,1,20,{"idea":36,"execution":38,"docs":39,"performance":40,"design":41},{"positive":18,"critical":37},0,{"positive":37,"critical":33},{"positive":37,"critical":37},{"positive":37,"critical":37},{"positive":18,"critical":37},[43,37,37,37,37,44,37,33,37,37,44,37,37,37,44,37,43,44,37,43,44,37,44,37,44,37,43,43,43,43,43,44,43,43,43],5,3,null,{"problem":47,"audience":45,"pricing":45,"motivation":45,"time_to_build":45,"stack":57,"openness":71,"stage":71,"team_size":71},{"value":48,"source":49,"evidence":50},"Animating a DOM element smoothly into another element's position and size","inferred",[51,53],{"id":52},"post",{"id":54,"by":55,"text":56},"9458973","clement75009","This is a great way to implement the principles of meaningful transition and visual continuity mentioned in the Material Design doc. When Material Design was introduced I thought…",[58,64],{"value":59,"source":49,"evidence":60},"JavaScript",[61],{"id":62,"by":11,"text":63},"9458464","The easing functions on the demo page are from https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Feases - ramjet will take any easing function (it should accept a value between 0 and 1, and return…",{"value":65,"source":66,"evidence":67},"CSS transforms and animations","maker",[68],{"id":69,"by":11,"text":70},"9459080","Thanks! Very good question - I haven't used it with many elements in one go, so I don't have a ready answer - it needs to clone a bunch of nodes and call getComputedStyle a few…","unknown",{"praise":73,"objections":87,"requests":112,"questions":129,"alternatives":148},[74],{"value":75,"source":76,"evidence":77},"Useful for transitions and visual continuity","commenter",[78,79,83],{"id":54,"by":55,"text":56},{"id":80,"by":81,"text":82},"9458799","kveykva","I've been looking for something like this. Awesome, great work.",{"id":84,"by":85,"text":86},"9458700","josephpmay","This is awesome. I will definitely be using this in a project this weekend.",[88,98,105],{"value":89,"source":76,"evidence":90},"Breaks when user scrolls during animation in some browsers",[91,95],{"id":92,"by":93,"text":94},"9458879","Tloewald","By using position: fixed they bork themselves if the user scrolls during an animation. (Easily verified by scrolling while watching the demo.) This seems fixable (no pun…",{"id":96,"by":93,"text":97},"9459303","I was using chrome on the Mac and easily got aberrations. I can see issues with morphing to\u002Ffrom svg in mobile safari but it's actually barely noticeable even when torturing the…",{"value":99,"source":76,"evidence":100},"Browser support concerns, special cases for IE 11, Safari and Firefox",[101],{"id":102,"by":103,"text":104},"9461389","Animats","That's very nice. Looks like browser support is a problem, though; there are special cases for IE 11, Safari, and Firefox. I thought we were past that. I have an application for…",{"value":106,"source":76,"evidence":107},"Performance with many elements is untested",[108],{"id":109,"by":110,"text":111},"9458710","smhenderson","Very cool, I could definitely see this being used to create some interesting games. Does it scale well when using a lot of elements? Can you get a bunch moving at once without…",[113,120],{"value":114,"source":76,"evidence":115},"Document browser support prominently",[116],{"id":117,"by":118,"text":119},"9458933","jigneshhk","Awesome stuff. I would advise you to prominently display information about what all browsers it supports.",{"value":121,"source":76,"evidence":122},"Fix aberrations when morphing to or from SVG",[123,126],{"id":124,"by":11,"text":125},"9459353","Are the aberrations related to transitions into or out of the SVG element (the purple box)? If so, I've just added an issue for that: https:\u002F\u002Fgithub.com\u002FRich-Harris\u002Framjet\u002Fissues\u002F6",{"id":127,"by":93,"text":128},"9459734","Exactly — not a big deal, but worth fixing I think.",[130,134,141],{"value":131,"source":76,"evidence":132},"Does it scale to many elements at once?",[133],{"id":109,"by":110,"text":111},{"value":135,"source":76,"evidence":136},"Can it work with spring-physics easing like Rebound.js?",[137],{"id":138,"by":139,"text":140},"9460073","fredliu","So does it mean it can be used with things like Rebound.js (http:\u002F\u002Ffacebook.github.io\u002Frebound-js\u002Fexamples\u002F) to provide spring like animation?",{"value":142,"source":76,"evidence":143},"Does it work with already-animated CSS elements?",[144],{"id":145,"by":146,"text":147},"9459152","amelius","Does it also work if the source and target are already animated, e.g., using CSS?",[149,156],{"value":150,"source":76,"evidence":151},"Tweening in Flash",[152],{"id":153,"by":154,"text":155},"9458698","artursapek","Reminds me of \"tweening\" in Flash. Ah, the good old days...",{"value":157,"source":76,"evidence":158},"Rebound.js",[159],{"id":138,"by":139,"text":140},{"comments":161,"answered":162,"key":163},7,4,[164,165,168],{"id":124,"text":125},{"id":166,"text":167},"9458955","It uses position: absolute for HTML elements, but there's a position: fixed SVG, because that's the only sane way (that I've found so far) for morphing HTML into SVG and vice…",{"id":169,"text":170},"9458984","Good idea, thanks. In the meantime, I've successfully testing it in IE10+, Chrome (OS X and Android), Firefox, Safari 6+ and mobile Safari. Basically it should work in any…",{"commenters":172,"max_depth":43,"maker_replies":161,"first_comment_mins":173,"lifespan_hours":174},25,24,31,[176,178,182,186,189,193,195,198,200,203,205,207,209,211,212,214,216,220,222,224,226,230,231,232,234,235,237,240,244,246,249,254,256,260,264],[54,37,43,177,55,37],"project\u002Fpositive\u002Fidea",[179,37,37,180,181,37],"9459653","other\u002Fneutral\u002Fnone","themodelplumber",[183,37,37,184,185,37],"9461174","commenter\u002Fneutral\u002Fnone","gidan",[187,37,37,184,188,37],"9463373","lolptdr",[190,37,37,191,192,37],"9467688","commenter\u002Fneutral\u002Fidea","chinchang",[153,33,44,194,154,37],"project\u002Fneutral\u002Fidea",[196,33,37,180,197,37],"9463103","fny",[92,18,33,199,93,37],"project\u002Fcritical\u002Fexecution",[201,18,37,184,202,37],"9458901","gtCameron",[204,18,37,184,55,37],"9458924",[96,18,44,206,93,37],"project\u002Fmixed\u002Fexecution",[124,18,37,208,11,33],"maker\u002Fneutral\u002Fexecution",[127,18,37,210,93,37],"commenter\u002Fneutral\u002Fexecution",[166,18,37,208,11,33],[117,44,44,213,118,37],"project\u002Fneutral\u002Fdocs",[169,44,37,215,11,33],"maker\u002Fneutral\u002Fdocs",[217,162,43,218,219,37],"9459842","maker\u002Fpositive\u002Fnone","arxpoetica",[109,43,44,221,110,37],"project\u002Fneutral\u002Fperformance",[69,43,37,223,11,33],"maker\u002Fneutral\u002Fperformance",[225,43,43,218,110,37],"9460543",[227,32,44,228,229,37],"9458433","project\u002Fneutral\u002Fexecution","moron4hire",[62,32,37,208,11,33],[138,32,44,194,139,37],[233,32,37,194,11,33],"9460240",[145,161,44,228,146,37],[236,161,37,208,11,33],"9459198",[80,238,43,239,81,37],8,"project\u002Fpositive\u002Fnone",[241,242,43,218,243,37],"9464102",9,"h_o",[84,245,43,239,85,37],10,[247,31,43,177,248,37],"9458461","untilHellbanned",[250,251,43,252,253,37],"9458514",12,"project\u002Fpositive\u002Fdesign","detaro",[102,255,44,206,103,37],13,[257,258,43,252,259,37],"9458769",14,"intruder",[261,262,43,239,263,37],"9463518",15,"alinseba",[265,266,43,218,267,37],"9458846",16,"greenpizza13",[],[270,275,280,285,290,295],{"id":271,"name":272,"points":273,"category":274},"9432949","Transformy",764,"productivity",{"id":276,"name":277,"points":278,"category":279},"9427856","Startup Generator",607,"creative",{"id":281,"name":282,"points":283,"category":284},"9452606","Caddy",208,"infrastructure",{"id":286,"name":287,"points":288,"category":289},"9445524","Startup Timelines",111,"learning_science",{"id":291,"name":292,"points":293,"category":294},"9433661","FeatHub",108,"dev_tools",{"id":296,"name":297,"points":298,"category":284},"9440722","Betty",91,false,"v2",{"id":302,"name":5,"line":6,"ai":299,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":303,"top":18,"kw":304,"maker":11,"domain":10,"tier":19,"attempts":37,"strip":305,"url":9,"mix":306,"praise":75,"objection":89,"sub":21},9458268,0.47,[24,25,26,27],"50000301003000305305303030555553555",[31,32,18,33],1794036530843]