make contributions easier with the online development setup.

Author: nisarhassan12

.gitpod.yml

@@ -0,0 +1,6 @@
+tasks:
+  - init: yarn install && yarn bootstrap
+
+vscode:
+  extensions:
+    - esbenp.prettier-vscode@5.7.1:GDba64T6G+TUi1qmc6BE3A==

CONTRIBUTING.md

@@ -38,6 +38,12 @@ Follow these steps to get your code PR-ready:
 6. Update `CHANGELOG.md`.
 7. Ensure your changes build by running `yarn build` in the appropriate package directory(s).
 
+## Online one-click setup
+
+You can use Gitpod(an online IDE which is free for Open Source) for developing online. With a single click it will launch a workspace and automatically: clone the `popmoton` repo and run `yarn install` && `yarn bootstrap` so that anyone interested can start straight away.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
+
 ## Codebase Overview
 
 Other than [Stylefire](https://github.com/popmotion/stylefire) and [Framesync](https://github.com/popmotion/framesync), Popmotion is a monorepo. All Popmotion and Pose packages are contained in the [`packages` directory](https://github.com/Popmotion/popmotion/tree/master/packages).

README.md

@@ -5,6 +5,7 @@
 [![npm version](https://img.shields.io/npm/v/popmotion.svg?style=flat-square)](https://www.npmjs.com/package/popmotion)
 [![npm downloads](https://img.shields.io/npm/dm/popmotion.svg?style=flat-square)](https://www.npmjs.com/package/popmotion)
 [![Twitter Follow](https://img.shields.io/twitter/follow/popmotionjs.svg?style=social&label=Follow)](http://twitter.com/popmotionjs)
+[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
 
 Popmotion is:
 - **Powerful**: It supports keyframe and spring animations for numbers, colors and complex strings.