react-moving-text - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

package.json

 {
   "name": "react-moving-text",
   "homepage": "https://yidaoj.github.io/react-moving-text",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "",
@@ -6,0 +6,0 @@ "main": "build/index.js",

src/component.js

@@ -174,29 +174,2 @@ import React from "react"
 
-
-const hang = keyframes`
-  0% {
-    transform: rotate(0);
-    transform-origin: top left;
-  }
-  20%, 60% {
-    transform: rotate(40deg);
-    transform-origin: top left;
-  }
-  40% {
-    transform: rotate(60deg);
-    transform-origin: top left;
-  }
-  80% {
-    transform: rotate(-20deg);
-    transform-origin: top left;
-  }
-  90% {
-    transform: rotate(30deg);
-    transform-origin: top left;
-  }
-  100% {
-    transform: rotate(0);
-    transform-origin: top left;
-  }
-`
 const hangOnLeft = keyframes`
@@ -266,3 +239,2 @@ 0% { transform-origin: left; }
 
-
 const squeezeMix = keyframes`
@@ -323,3 +295,10 @@ 0% { transform: scale(1, 1); }
 const flip = keyframes`
-  to { transform: rotateX(1turn); }
+  0% {
+    transform: perspective(1000px) rotateX(360deg);
+    transform-origin: center;
+  }
+  100% {
+    transform: perspective(1000px) rotateX(0deg);
+    transform-origin: center;
+  }
 `
@@ -360,12 +339,2 @@ const flipIn = keyframes`
 `
-const flipVertial2 = keyframes`
-  0% {
-    transform: perspective(1000px) rotateX(360deg);
-    transform-origin: center;
-  }
-  100% {
-    transform: perspective(1000px) rotateX(0deg);
-    transform-origin: center;
-  }
-`
 const flipSlowDown = keyframes` // tbm
@@ -449,47 +418,74 @@ 0% {
 `
-const flipCenterToRight = keyframes`
+
+const slideInFromLeft = keyframes`
   0% {
-    transform-origin: left;
-    transform: rotateY(0deg) translateX(0px);
+    opacity: 0;
+    transform: translateX(-100%);
   }
+  60% {
+    opacity: 1;
+    transform: translateX(20%);
+  }
   100% {
-    transform-origin: right;
-    transform: rotateY(85deg) translateX(220px);
+    opacity: 1;
+    transform: translateX(0);
   }
-  /* 100% {
-    transform-origin: left;
-    transform: rotateY(0deg) translateX(0px);
-  } */
 `
-
-
-const slideInVertical = keyframes`
+const slideInFromRight = keyframes`
   0% {
     opacity: 0;
-    transform: translateY(-100%);
+    transform: translateX(100%);
   }
   60% {
     opacity: 1;
-    transform: translateY(20%);
+    transform: translateX(-20%);
   }
   100% {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateX(0);
   }
 `
-const slideOutVertical = keyframes`
+const slideOutToLeft = keyframes`
   0% {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateX(0);
   }
   60% {
     opacity: 0;
-    transform: translateY(120%);
+    transform: translateX(-120%);
   }
   100% {
     opacity: 0;
+    transform: translateX(-100%);
+  }
+`
+const slideOutToRight = keyframes`
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  60% {
+    opacity: 0;
+    transform: translateX(120%);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+`
+const slideInFromTop = keyframes`
+  0% {
+    opacity: 0;
     transform: translateY(100%);
   }
+  60% {
+    opacity: 1;
+    transform: translateY(-20%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 `
-const slideInAndOutVertical = keyframes`
+const slideInFromBottom = keyframes`
   0% {
@@ -499,12 +495,32 @@ opacity: 0;
   }
-  20% {
+  60% {
     opacity: 1;
     transform: translateY(20%);
   }
-  45%, 65% {
+  100% {
     opacity: 1;
     transform: translateY(0);
   }
-  85% {
+`
+const slideOutToTop = keyframes`
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  60% {
     opacity: 0;
+    transform: translateY(-120%);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+`
+const slideOutToBottom = keyframes`
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  60% {
+    opacity: 0;
     transform: translateY(120%);
@@ -518,3 +534,24 @@ }
 
+const fold = keyframes`
+  0% { transform: scale3d(1, 1, 1); }
+  30% { transform: scale3d(1, 0.4, 1); }
+  60% { transform: scale3d(0.4, 0.4, 1); }
+  100% {
+    opacity: 0;
+    transform: scale3d(0.2, 0.2, 0.2);
+  }
+`
+const unfold = keyframes`
+  0% {
+    opacity: 0;
+    transform: scale3d(0, 0, 0); }
+  30% {
+    opacity: 1;
+    transform: scale3d(0.4, 0.4, 1);
+  }
+  60% { transform: scale3d(0.4, 1, 1); }
+  100% { transform: scale3d(1, 1, 1); }
+`
 
+
 const zoomIn = keyframes`
@@ -530,11 +567,23 @@ from { transform: scale(2); }
 const rotateCW = keyframes`
-  from { transform: rotate(0deg) }
-  to { transform: rotate(360deg) }
+  from {
+    transform: rotate(0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate(360deg);
+    transform-origin: center center;
+  }
 `
 const rotateACW = keyframes`
-  from { transform: rotate(0deg) }
-  to { transform: rotate(-360deg) }
+  from {
+    transform: rotate(0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate(-360deg);
+    transform-origin: center center;
+  }
 `
 const rotateSlowDown = keyframes`
-  0% { transform:rotateZ(0deg)  }
+  0% { transform:rotateZ(0deg);  }
   5% { transform: rotateZ(1turn); }
@@ -544,6 +593,31 @@ 10% { transform: rotateZ(2turn); }
   40% { transform: rotateZ(4turn); }
-  70%, 100% { transform: rotateZ(5turn); }
+  65%, 100% { transform: rotateZ(5turn); }
 `
 
 
+const popIn = keyframes`
+  0% {
+    transform: scale3d(0, 0, 0);
+    opacity: 0;
+  }
+  30% {
+    transform: scale3d(1.1, 1.1, 1.1);
+    opacity: 1;
+  }
+  60% { transform: scale3d(1, 1, 1); }
+  80% { transform: scale3d(1.03, 1.03, 1.03); }
+  100% { transform: scale3d(1, 1, 1); }
+`
+const popOut = keyframes`
+  0% { transform: scale3d(1, 1, 1); }
+  60% {
+    transform: scale3d(1.1, 1.1, 1.1);
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+`
+
 const typewriter = keyframes``
@@ -565,3 +639,2 @@
 
-
   fadeIn: fadeIn,
@@ -579,20 +652,3 @@ fadeInFromLeft: fadeInFromLeft,
 
-  hang: hang,
-  hangOnLeft: hangOnLeft,
-  hangOnRight: hangOnRight,
-
-  shakeMix: shakeMix,
-  shakeHorizontal: shakeHorizontal,
-  shakeVertical: shakeVertical,
-
-  squeezeMix: squeezeMix,
-  squeezeHorizontal: squeezeHorizontal,
-  squeezeVertical: squeezeVertical,
-
-  rotateSlowDown: rotateSlowDown,
-  rotateCW: rotateCW,
-  rotateACW: rotateACW,
-
   flip: flip,
-  flipVertial2: flipVertial2,
   flipIn: flipIn,
@@ -605,14 +661,38 @@ flipOut: flipOut,
   flipToBottom: flipToBottom,
-  flipCenterToRight: flipCenterToRight,
   flipFromLeftToCenter: flipFromLeftToCenter,
 
+  fold: fold,
+  unfold: unfold,
 
-  slideInVertical: slideInVertical,
-  slideOutVertical: slideOutVertical,
-  slideInAndOutVertical: slideInAndOutVertical,
+  hangOnLeft: hangOnLeft,
+  hangOnRight: hangOnRight,
 
+  rotateSlowDown: rotateSlowDown,
+  rotateCW: rotateCW,
+  rotateACW: rotateACW,
 
+
+  shakeMix: shakeMix,
+  shakeHorizontal: shakeHorizontal,
+  shakeVertical: shakeVertical,
+
+  squeezeMix: squeezeMix,
+  squeezeHorizontal: squeezeHorizontal,
+  squeezeVertical: squeezeVertical,
+
+  slideInFromLeft: slideInFromLeft,
+  slideInFromRight: slideInFromRight,
+  slideOutToLeft: slideOutToLeft,
+  slideOutToRight: slideOutToRight,
+  slideInFromTop: slideInFromTop,
+  slideInFromBottom: slideInFromBottom,
+  slideOutToTop: slideOutToTop,
+  slideOutToBottom: slideOutToBottom,
+
   zoomIn: zoomIn,
   zoomOut: zoomOut,
 
+  popIn: popIn,
+  popOut: popOut,
+
   typewriter: typewriter
@@ -619,0 +699,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

89124

3.52%

Lines of code

930

9.54%

No dependency changes