{"id":2717,"date":"2019-09-22T11:00:00","date_gmt":"2019-09-22T11:00:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=2717"},"modified":"2019-08-25T11:08:52","modified_gmt":"2019-08-25T11:08:52","slug":"framer-motion-animation-gesture-library-for-react","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/framer-motion-animation-gesture-library-for-react\/","title":{"rendered":"Framer Motion: Animation &#038; Gesture Library for React"},"content":{"rendered":"\n<p>Framer Motion is a new open source, production-ready motion library for React on the\u00a0web. Design fluid animations for the web, across desktop and mobile. It has a very simple declarative API that makes it easy to create and orchestrate complex animations with the minimal amount of code. In this article, we\u2019ll start with very basic animations and gradually move to the more advanced ones. <\/p>\n\n\n\n<p><em>Note: animation examples in the article may not look smooth because of a low frame rate of GIF images. Rest assured, real animation are\u00a0<strong>butter-smooth<\/strong>. You can play with them in the\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/codesandbox.io\/s\/framer-motion-intro-96bu3\" target=\"_blank\">sandbox here<\/a>.<\/em><\/p>\n\n\n\n<!--more-->\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Download<\/strong>: <a href=\"https:\/\/github.com\/framer\/motion\/archive\/master.zip\">GitHub<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Framer Motion is a new open source, production-ready motion library for React on the\u00a0web. Design fluid animations for the web, across desktop and mobile. It has a very simple declarative API that makes it easy to create and orchestrate complex animations with the minimal amount of code. In this article, we\u2019ll start with very basic [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2718,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,12],"tags":[93,25,87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/08\/cover.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-HP","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2717"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=2717"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2717\/revisions"}],"predecessor-version":[{"id":2719,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2717\/revisions\/2719"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/2718"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=2717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=2717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=2717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}