diff --git a/README.md b/README.md
index 45eda59..706ea03 100644
--- a/README.md
+++ b/README.md
@@ -2,15 +2,13 @@
 
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/helium-animated-pages)[![npm version](https://badge.fury.io/js/helium-animated-pages.svg)](https://badge.fury.io/js/helium-animated-pages)
 
-###### [Docs/Demo](https://helium-animated-pages.glitch.me/demo/) | [Using it in `pwa-starter-kit`](https://github.com/alangdm/helium-animated-pages/wiki/Usage-in-pwa-starter-kit)
+###### [Docs/Demo](https://helium-animated-pages.glitch.me/demo/)
 
 This is a light spiritual successor to the now deprecated [`<neon-animated-pages>`](https://www.webcomponents.org/element/PolymerElements/neon-animation/elements/neon-animated-pages).
 
-It works with css animations and only depends on [lit-element](https://github.com/Polymer/lit-element) so you don't have to worry about including any heavy js libraries.
+It works with css animations and only depends on [lit](https://www.npmjs.com/package/lit) so you don't have to worry about including any heavy js libraries.
 
-This component takes care of the logic behind triggering the animations so that you can focus on making your views and your animations (or just use the animations included in the `sample-animations` folder if you don't want to bother with those either 😉.)
-
-It can be easily used in [pwa-starter-kit](https://github.com/Polymer/pwa-starter-kit/) and [here's how](https://github.com/alangdm/helium-animated-pages/wiki/Usage-in-pwa-starter-kit).
+This component takes care of the logic behind triggering the animations so that you can focus on making your views and your animations. Alternatively, you can use the animations included in the `sample-animations` folder. 😉
 
 To begin using it just follow this simple steps:
 
@@ -26,14 +24,14 @@ To begin using it just follow this simple steps:
   <!-- type="module" is essential -->
   <script
     type="module"
-    src="node_modules/helium-animated-pages/helium-animated-pages.js"
+    src="node_modules/helium-animated-pages"
   ></script>
   ```
 
   In a js module:
 
   ```javascript
-  import 'helium-animated-pages/helium-animated-pages.js';
+  import 'helium-animated-pages';
   ```
 
 - Create an instance of `<helium-animated-pages>` in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/) and start using it:
@@ -82,11 +80,6 @@ To begin using it just follow this simple steps:
     <!-- The pages can be almost anything -->
     <section name="page1">Page 1</section>
     <div name="page2">Page 2</div>
-    <!-- It is recommended that custom elements
-        used as a page all extend an element like pwa-starter-kit's
-        page-view-element
-        https://github.com/Polymer/pwa-starter-kit/blob/master/src/components/page-view-element.js
-      -->
     <custom-element name="page3"></custom-element>
   </helium-animated-pages>
   <script>
@@ -99,8 +92,8 @@ To begin using it just follow this simple steps:
     });
 
     // defining the "rules" for which css classes to apply on
-    // diferent page transitions, for more info go to:
-    // https://github.com/alangdm/helium-animated-pages/wiki/API#attrforselected
+    // different page transitions, for more info go to:
+    // https://helium-animated-pages.glitch.me/demo/
     // I'm using css classes which aren't defined on this context but you
     // must define them when actually using this
     document.querySelector('#pages').animationClasses = {
diff --git a/demo/components/demo-element.js b/demo/components/demo-element.js
index bc7953d..1ab5e26 100644
--- a/demo/components/demo-element.js
+++ b/demo/components/demo-element.js
@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import './settings-demo.js';
 import './property-demo.js';
 import { sharedStyles } from './shared-styles.js';
diff --git a/demo/components/page-view-element.js b/demo/components/page-view-element.js
index 094f27b..913dab5 100644
--- a/demo/components/page-view-element.js
+++ b/demo/components/page-view-element.js
@@ -8,7 +8,7 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 
 export class PageViewElement extends LitElement {
   // Only render this page if it's actually visible.
diff --git a/demo/components/property-demo.js b/demo/components/property-demo.js
index 719cf1e..ebbd8e4 100644
--- a/demo/components/property-demo.js
+++ b/demo/components/property-demo.js
@@ -1,4 +1,4 @@
-import { html, css } from 'lit-element';
+import { html, css } from 'lit';
 import { PageViewElement } from './page-view-element.js';
 import { sharedStyles } from './shared-styles.js';
 import '../../helium-animated-pages.js';
diff --git a/demo/components/settings-demo.js b/demo/components/settings-demo.js
index c92d0e6..b11bec0 100644
--- a/demo/components/settings-demo.js
+++ b/demo/components/settings-demo.js
@@ -1,4 +1,4 @@
-import { html, css } from 'lit-element';
+import { html, css } from 'lit';
 import { PageViewElement } from './page-view-element.js';
 import { sharedStyles } from './shared-styles.js';
 import '../../helium-animated-pages.js';
diff --git a/demo/components/shared-styles.js b/demo/components/shared-styles.js
index 0f652f4..96da257 100644
--- a/demo/components/shared-styles.js
+++ b/demo/components/shared-styles.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 export const sharedStyles = css`
   *,
diff --git a/demo/demo.html b/demo/demo.html
index 92ffffd..66c6c77 100644
--- a/demo/demo.html
+++ b/demo/demo.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>&lt;helium-animated-pages&gt; - Demo</title>
-    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script type="module" src="./components/demo-element.js"></script>
     <style>
       body {
diff --git a/demo/index.html b/demo/index.html
index c4c4c4b..22f9a08 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>&lt;helium-animated-pages&gt; - Docs</title>
-    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script type="module">
       import 'api-viewer-element/lib/api-docs.js';
     </script>
diff --git a/package-lock.json b/package-lock.json
index 5dad1fd..3be12cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,10 @@
       "version": "1.1.1",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "lit-element": "^2.2.1"
+        "lit": "2.0.0-pre.1"
       },
       "devDependencies": {
         "@web/dev-server": "0.1.7",
-        "@webcomponents/webcomponentsjs": "2.5.0",
         "api-viewer-element": "0.4.4",
         "eslint": "7.20.0",
         "eslint-config-prettier": "7.2.0",
@@ -86,6 +85,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.0.0-pre.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0-pre.2.tgz",
+      "integrity": "sha512-IjguhOf9rFxtStHr8Sou2TuaUgpeLFojdKDoorssuyY0MnPCFdlcOJ2VhTOnoxV3fwHDC9m3Esc8zT+B3UG3Kw=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -730,12 +734,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/@webcomponents/webcomponentsjs": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.5.0.tgz",
-      "integrity": "sha512-C0l51MWQZ9kLzcxOZtniOMohpIFdCLZum7/TEHv3XWFc1Fvt5HCpbSX84x8ltka/JuNKcuiDnxXFkiB2gaePcg==",
-      "dev": true
-    },
     "node_modules/accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -868,6 +866,15 @@
         "tslib": "^1.10.0"
       }
     },
+    "node_modules/api-viewer-element/node_modules/lit-element": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.4.0.tgz",
+      "integrity": "sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==",
+      "dev": true,
+      "dependencies": {
+        "lit-html": "^1.1.1"
+      }
+    },
     "node_modules/argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -3507,18 +3514,40 @@
         "node": ">=8"
       }
     },
+    "node_modules/lit": {
+      "version": "2.0.0-pre.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0-pre.1.tgz",
+      "integrity": "sha512-1c/Df773r0yKZmZfzz0e0EzltdKDmEKrfyF7DFWagmiMxaA3c/9m9+58BhMF7LJg2Rt04L5ZQ3GWpkt1MtX/mA==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.0.0-pre.2",
+        "lit-element": "^3.0.0-pre.3",
+        "lit-html": "^2.0.0-pre.6"
+      }
+    },
     "node_modules/lit-element": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.2.1.tgz",
-      "integrity": "sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw==",
+      "version": "3.0.0-pre.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0-pre.3.tgz",
+      "integrity": "sha512-E6QaOQ+OJx4HX5bI6Xtojw5qHlOSY5R7NWXRtbq+/xxIIPXfwNTF5fOpOKREd8/GSdQP1hHBCxBovlitVPKYaA==",
       "dependencies": {
-        "lit-html": "^1.0.0"
+        "@lit/reactive-element": "^1.0.0-pre.1",
+        "lit-html": "^2.0.0-pre.4"
       }
     },
+    "node_modules/lit-element/node_modules/lit-html": {
+      "version": "2.0.0-pre.6",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-pre.6.tgz",
+      "integrity": "sha512-cqF/ukSYYkV4KLzeDXk7pMgkrWK6Vn5TvfXewK+SpVDMCw7AXd7Ft+6WShlbTb27AZAFGUfL3uM2kKsrTqT14w=="
+    },
     "node_modules/lit-html": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.1.2.tgz",
-      "integrity": "sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA=="
+      "integrity": "sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA==",
+      "dev": true
+    },
+    "node_modules/lit/node_modules/lit-html": {
+      "version": "2.0.0-pre.6",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-pre.6.tgz",
+      "integrity": "sha512-cqF/ukSYYkV4KLzeDXk7pMgkrWK6Vn5TvfXewK+SpVDMCw7AXd7Ft+6WShlbTb27AZAFGUfL3uM2kKsrTqT14w=="
     },
     "node_modules/load-json-file": {
       "version": "2.0.0",
@@ -5724,6 +5753,11 @@
         }
       }
     },
+    "@lit/reactive-element": {
+      "version": "1.0.0-pre.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.0.0-pre.2.tgz",
+      "integrity": "sha512-IjguhOf9rFxtStHr8Sou2TuaUgpeLFojdKDoorssuyY0MnPCFdlcOJ2VhTOnoxV3fwHDC9m3Esc8zT+B3UG3Kw=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -6269,12 +6303,6 @@
         "parse5": "^6.0.1"
       }
     },
-    "@webcomponents/webcomponentsjs": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.5.0.tgz",
-      "integrity": "sha512-C0l51MWQZ9kLzcxOZtniOMohpIFdCLZum7/TEHv3XWFc1Fvt5HCpbSX84x8ltka/JuNKcuiDnxXFkiB2gaePcg==",
-      "dev": true
-    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -6380,6 +6408,17 @@
         "lit-html": "^1.0.0",
         "marked": "^0.8.0",
         "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "lit-element": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.4.0.tgz",
+          "integrity": "sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg==",
+          "dev": true,
+          "requires": {
+            "lit-html": "^1.1.1"
+          }
+        }
       }
     },
     "argparse": {
@@ -8537,18 +8576,44 @@
         }
       }
     },
+    "lit": {
+      "version": "2.0.0-pre.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.0.0-pre.1.tgz",
+      "integrity": "sha512-1c/Df773r0yKZmZfzz0e0EzltdKDmEKrfyF7DFWagmiMxaA3c/9m9+58BhMF7LJg2Rt04L5ZQ3GWpkt1MtX/mA==",
+      "requires": {
+        "@lit/reactive-element": "^1.0.0-pre.2",
+        "lit-element": "^3.0.0-pre.3",
+        "lit-html": "^2.0.0-pre.6"
+      },
+      "dependencies": {
+        "lit-html": {
+          "version": "2.0.0-pre.6",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-pre.6.tgz",
+          "integrity": "sha512-cqF/ukSYYkV4KLzeDXk7pMgkrWK6Vn5TvfXewK+SpVDMCw7AXd7Ft+6WShlbTb27AZAFGUfL3uM2kKsrTqT14w=="
+        }
+      }
+    },
     "lit-element": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.2.1.tgz",
-      "integrity": "sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw==",
+      "version": "3.0.0-pre.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.0.0-pre.3.tgz",
+      "integrity": "sha512-E6QaOQ+OJx4HX5bI6Xtojw5qHlOSY5R7NWXRtbq+/xxIIPXfwNTF5fOpOKREd8/GSdQP1hHBCxBovlitVPKYaA==",
       "requires": {
-        "lit-html": "^1.0.0"
+        "@lit/reactive-element": "^1.0.0-pre.1",
+        "lit-html": "^2.0.0-pre.4"
+      },
+      "dependencies": {
+        "lit-html": {
+          "version": "2.0.0-pre.6",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.0.0-pre.6.tgz",
+          "integrity": "sha512-cqF/ukSYYkV4KLzeDXk7pMgkrWK6Vn5TvfXewK+SpVDMCw7AXd7Ft+6WShlbTb27AZAFGUfL3uM2kKsrTqT14w=="
+        }
       }
     },
     "lit-html": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.1.2.tgz",
-      "integrity": "sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA=="
+      "integrity": "sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA==",
+      "dev": true
     },
     "load-json-file": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index ba00b26..a234687 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,10 @@
   "author": "alangdm",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "lit-element": "^2.2.1"
+    "lit": "2.0.0-pre.1"
   },
   "devDependencies": {
     "@web/dev-server": "0.1.7",
-    "@webcomponents/webcomponentsjs": "2.5.0",
     "api-viewer-element": "0.4.4",
     "eslint": "7.20.0",
     "eslint-config-prettier": "7.2.0",
diff --git a/sample-animations/carousel-animations.js b/sample-animations/carousel-animations.js
index cafdcd5..54e5a6d 100644
--- a/sample-animations/carousel-animations.js
+++ b/sample-animations/carousel-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateCarouselLeftIn = css`
diff --git a/sample-animations/cube-animations.js b/sample-animations/cube-animations.js
index f43215a..d789aca 100644
--- a/sample-animations/cube-animations.js
+++ b/sample-animations/cube-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateCubeLeftIn = css`
diff --git a/sample-animations/fade-animations.js b/sample-animations/fade-animations.js
index e50461f..96d1cc4 100644
--- a/sample-animations/fade-animations.js
+++ b/sample-animations/fade-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 
diff --git a/sample-animations/flip-animations.js b/sample-animations/flip-animations.js
index cdd3c1a..f5e9684 100644
--- a/sample-animations/flip-animations.js
+++ b/sample-animations/flip-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const FlipInLeft = css`
diff --git a/sample-animations/fold-unfold-animations.js b/sample-animations/fold-unfold-animations.js
index 230cfbb..7de804d 100644
--- a/sample-animations/fold-unfold-animations.js
+++ b/sample-animations/fold-unfold-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateUnfoldLeft = css`
diff --git a/sample-animations/move-animations.js b/sample-animations/move-animations.js
index a75891f..e6b3e6e 100644
--- a/sample-animations/move-animations.js
+++ b/sample-animations/move-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 
diff --git a/sample-animations/push-pull-animations.js b/sample-animations/push-pull-animations.js
index 2693236..6f38683 100644
--- a/sample-animations/push-pull-animations.js
+++ b/sample-animations/push-pull-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 
diff --git a/sample-animations/room-animations.js b/sample-animations/room-animations.js
index 1f9300a..c450df8 100644
--- a/sample-animations/room-animations.js
+++ b/sample-animations/room-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateRoomLeftIn = css`
diff --git a/sample-animations/rotate-animations.js b/sample-animations/rotate-animations.js
index deea3e1..a9ac4f2 100644
--- a/sample-animations/rotate-animations.js
+++ b/sample-animations/rotate-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateInNewspaper = css`
diff --git a/sample-animations/scale-animations.js b/sample-animations/scale-animations.js
index 8cbd3f3..5008f14 100644
--- a/sample-animations/scale-animations.js
+++ b/sample-animations/scale-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 
diff --git a/sample-animations/sides-animations.js b/sample-animations/sides-animations.js
index 0b7d0a6..b9799e3 100644
--- a/sample-animations/sides-animations.js
+++ b/sample-animations/sides-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateSidesIn = css`
diff --git a/sample-animations/slides-animations.js b/sample-animations/slides-animations.js
index 088532e..775568e 100644
--- a/sample-animations/slides-animations.js
+++ b/sample-animations/slides-animations.js
@@ -1,4 +1,4 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
 
 /* In animations */
 export const RotateSlideIn = css`
diff --git a/src/HeliumAnimatedPages.js b/src/HeliumAnimatedPages.js
index 3b70a1e..cf9b95f 100644
--- a/src/HeliumAnimatedPages.js
+++ b/src/HeliumAnimatedPages.js
@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import { stringOrIntSerializer } from './serializers.js';
 
 const _isString = (next) => {