{"id":307,"date":"2018-10-15T17:23:29","date_gmt":"2018-10-16T00:23:29","guid":{"rendered":"http:\/\/www.hankgrebe.com\/ux\/?p=307"},"modified":"2023-02-15T17:57:40","modified_gmt":"2023-02-16T01:57:40","slug":"animation-libraries","status":"publish","type":"post","link":"https:\/\/www.hankgrebe.com\/ux\/animation-libraries\/","title":{"rendered":"Animation Libraries"},"content":{"rendered":"<h1>List of Javascript &amp; CSS Animation Libraries<\/h1>\n<h2><\/h2>\n<h2>Javascript<\/h2>\n<p><strong>Greensock\u00a0&#8211; <a href=\"https:\/\/greensock.com\/\">website<\/a> &#8211; <a href=\"https:\/\/youtu.be\/-riXBjDfvOw\">video<\/a> &#8211; <a href=\"https:\/\/github.com\/greensock\/GreenSock-JS\">Github<\/a> &#8211;\u00a0<\/strong><span style=\"color: #808080;\">note: I have used this, time tested<\/span><\/p>\n<p><strong>Anime &#8211; <a href=\"http:\/\/animejs.com\/\">website<\/a>\u00a0&#8211; <a href=\"https:\/\/codepen.io\/juliangarnier\/\">Github<\/a> &#8211; <a href=\"https:\/\/codepen.io\/collection\/XLebem\/\">CodePen<\/a><\/strong><\/p>\n<p><strong>Velocity.js &#8211; <a href=\"http:\/\/velocityjs.org\/\">website<\/a> &#8211; <a href=\"https:\/\/youtu.be\/CdwvR6a39Tg\">video<\/a> &#8211;\u00a0\u00a0<a href=\"https:\/\/github.com\/julianshapiro\/velocity\">Github<\/a>\u00a0<\/strong><\/p>\n<p><strong>Bounce.js &#8211; <a href=\"http:\/\/bouncejs.com\/\">website<\/a> \u00a0&#8211; <a href=\"https:\/\/github.com\/tictail\/bounce.js\">Github<\/a> &#8211; <a href=\"https:\/\/codepen.io\/stevenmonson\/pen\/mepdzz\">CodePen<\/a><\/strong><\/p>\n<p><strong>mo.js &#8211; <a href=\"http:\/\/mojs.io\/\">website<\/a> &#8211; <a href=\"https:\/\/vimeo.com\/185587462\">video<\/a> &#8211;\u00a0<a href=\"https:\/\/github.com\/legomushroom\/mojs\">Github<\/a><\/strong><\/p>\n<p><strong>three.js &#8211; <a href=\"https:\/\/threejs.org\/\">website<\/a> &#8211;\u00a0\u00a0<a href=\"https:\/\/github.com\/mrdoob\/three.js\">GitHub<\/a> &#8211; <\/strong><span style=\"color: #808080;\">note: 3D animation renderer<\/span><\/p>\n<h2>CSS<\/h2>\n<p><strong>Animate.css &#8211; <a href=\"https:\/\/daneden.github.io\/animate.css\/\">website<\/a> &#8211; <a href=\"https:\/\/www.youtube.com\/watch?v=CBQGl6zokMs\">video<\/a> &#8211; <a href=\"https:\/\/github.com\/daneden\/animate.css\">Github<\/a><\/strong><\/p>\n<p><strong>AOS &#8211; <a href=\"https:\/\/michalsnik.github.io\/aos\/\">website<\/a>\u00a0&#8211; <a href=\"https:\/\/github.com\/michalsnik\/aos\">Github<\/a> &#8211; <\/strong><span style=\"color: #808080;\">note: Animate On Scroll library<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>List of Javascript &amp; CSS Animation Libraries Javascript Greensock\u00a0&#8211; website &#8211; video &#8211; Github &#8211;\u00a0note: I have used this, time tested Anime &#8211; website\u00a0&#8211; Github &#8211; CodePen Velocity.js &#8211; website &#8211; video &#8211;\u00a0\u00a0Github\u00a0 Bounce.js &#8211; website \u00a0&#8211; Github &#8211; CodePen mo.js &#8211; website &#8211; video &#8211;\u00a0Github three.js &#8211; website &#8211;\u00a0\u00a0GitHub &#8211; note: 3D animation renderer&#8230;<\/p>\n","protected":false},"author":1,"featured_media":308,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[5,21],"tags":[],"class_list":["post-307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-software"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.hankgrebe.com\/ux\/wp-content\/uploads\/2018\/10\/web-animation-libraries-A2.jpg?fit=941%2C1317&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p73ygx-4X","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/posts\/307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":10,"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"predecessor-version":[{"id":320,"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/posts\/307\/revisions\/320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/media\/308"}],"wp:attachment":[{"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hankgrebe.com\/ux\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}