🚀 Deploy v2

Author: lnardon

.npmignore

@@ -3,3 +3,6 @@
 /node_modules/*
 demo.gif
 /docs/*
+/react/*
+/demo/*
+/animated-text/*

animated-text/src/index.tsx

@@ -26,6 +26,8 @@ const AnimatedText = ({
         return styles.slideLeft
       case 'slide-right':
         return styles.slideRight
+      case 'pop-up':
+        return styles.popUp
       default:
         return styles.fadeIn
     }

animated-text/src/styles.module.css

@@ -1,3 +1,38 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.char {
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+.fadeIn {
+  animation-name: fadeIn;
+}
+
+.popUp {
+  animation-name: popup;
+}
+
+.slideUp {
+  animation-name: slide-up;
+}
+
+.slideDown {
+  animation-name: slide-down;
+}
+
+.slideRight {
+  animation-name: slide-right;
+}
+
+.slideLeft {
+  animation-name: slide-left;
+}
+
 @keyframes fadeIn {
   0% {
     opacity: 0;
@@ -7,46 +42,57 @@
   }
 }
 
+@keyframes popup {
+  0% {
+    opacity: 0;
+    transform: scale(0.64);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes slide-up {
   0% {
-    transform: translateY(100%);
+    transform: translateY(2rem);
     opacity: 0;
   }
   100% {
-    transform: translateY(0);
+    transform: translateY(0rem);
     opacity: 1;
   }
 }
 
 @keyframes slide-down {
   0% {
-    transform: translateY(0);
+    transform: translateY(-2rem);
     opacity: 0;
   }
   100% {
-    transform: translateY(100%);
+    transform: translateY(0rem);
     opacity: 1;
   }
 }
 
 @keyframes slide-right {
   0% {
-    transform: translateX(-100%);
+    transform: translateX(-2rem);
     opacity: 0;
   }
   100% {
-    transform: translateX(0);
+    transform: translateX(0rem);
     opacity: 1;
   }
 }
 
 @keyframes slide-left {
   0% {
-    transform: translateX(100%);
+    transform: translateX(2rem);
     opacity: 0;
   }
   100% {
-    transform: translateX(0);
+    transform: translateX(0rem);
     opacity: 1;
   }
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "animated-text-letters",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "A simple package to animate text using css and js. Vanilla Js and React.js support.",
   "main": "dist/index.js",
   "scripts": {