Framer Motion is a new open source, production-ready motion library for React on the web. 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’ll start with very basic animations and gradually move to the more advanced ones.

Note: animation examples in the article may not look smooth because of a low frame rate of GIF images. Rest assured, real animation are butter-smooth. You can play with them in the sandbox here.

Download: GitHub

Animation Code JavaScript