react-moving-text - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

package.json

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

README.md

@@ -7,3 +7,3 @@ # react-moving-text
 
-**View [Demo and Playground](https://github.com/YiDaoJ) **
+**View [Demo and Playground](https://yidaoj.github.io/react-moving-text/)**
 
@@ -20,11 +20,11 @@ ## Installation
 
-To use react-moving-text in your react project, wrap the content with a `ReAnimaTypo` component and customize the animation with relevant properties.
+To use react-moving-text in your react project, wrap the content with a `MovingText` component and customize the animation with relevant properties.
 
 ```react
 import React from 'react'
-import ReAnimateTypo from 'react-moving-text'
+import MovingText from 'react-moving-text'
 
 const MyAnimatedTypo = () => {
   return (
-    <ReAnimateTypo
+    <MovingText
       type="animation_type"
@@ -38,3 +38,3 @@ duration="1000ms"
       Content...
-    </ReAnimateTypo>
+    </MovingText>
   )
@@ -44,3 +44,3 @@ }
 
-###Available properties
+### Available properties
 
@@ -58,3 +58,3 @@ |  Property   | Corresponding Animation Property |     Data Type     | Default  Value | Property Unit |
 
-###Available animations
+### Available animations
 
@@ -99,3 +99,3 @@ | `type` / Animation name |
 import React, { useState } from 'react'
-import ReAnimateTypo from 'react-moving-text'
+import MovingText from 'react-moving-text'
 
@@ -115,3 +115,3 @@ const AnimationsForChaining = ["swing", "flipSlowDown", "fadeOutToBottom", "jelly"]
   return (
-    <ReAnimateTypo
+    <MovingText
       onAnimationEnd={handleChainAnimation}
@@ -122,4 +122,4 @@ type={animationType}
       iteration={1}>
-      AnimaTypo
-    </ReAnimateTypo>
+      MovingText
+    </MovingText>
   )
@@ -131,2 +131,2 @@ }
 
-## License
+## License

src/component.js

@@ -13,6 +13,96 @@ import React from "react"
 
-// to improve: jelly squeeze + spuezzeMix
-// to change / delete: spin = flip
 
+/* ========== basic animations ========== */
 
+const blur = keyframes`
+  from { filter: blur(0px); }
+  to { filter: blur(6px); }
+`
+const bounce = keyframes`
+  10% { transform: scaleY(0.9) translateY(5%); }
+  45% { transform: scaleY(1.2) translateY(-100%); }
+  65% { transform: scaleY(0.95) translateY(0); }
+  75% { transform: scaleY(1.05) translateY(-25%); }
+  85% { transform: scaleY(1) translateY(0); }
+  100% { transform: scaleY(1) translateY(0%); }
+`
+const effect3D = keyframes`
+  to {
+    text-shadow:
+    0 1px 0 #ccc,
+    0 2px 0 #c9c9c9,
+    0 3px 0 #bbb,
+    0 4px 0 #b9b9b9,
+    0 5px 0 #aaa,
+    0 6px 1px rgba(0, 0, 0, .1),
+    0 0 5px rgba(0, 0, 0, .1),
+    0 1px 3px rgba(0, 0, 0, .3),
+    0 3px 5px rgba(0, 0, 0, .2),
+    0 5px 10px rgba(0, 0, 0, .25)
+  }
+`
+const flash = keyframes`
+  0%, 40%, 80% { opacity: 1; }
+  20%, 60%, 100% { opacity: 0; }
+`
+const float = keyframes`
+  0% { transform: translate(2%, -10%) rotate(-1deg); }
+  100% { transform: translate(-2%, 5%) rotate(3deg); }
+`
+const glowing = keyframes`
+  0% { color: inherit; text-shadow: none; }
+  2%, 59%, 64%, 79% { color: #fff; }
+  3%, 59%, 63%, 78% { text-shadow: 0px 0px 60px, 0 0 22px, 0 0 1em inherit, 0 0 0.5em inherit, 0 0 .1em inherit, 0 10px 3px #000; }
+  60% { color: inherit; text-shadow: none; }
+  75% { color: inherit; text-shadow: none; }
+`
+const jelly = keyframes`
+  0% { transform: scaleX(1); }
+  20% { transform: scaleX(0.9); }
+  50% { transform: scaleX(1.25); }
+  85% { transform: scaleX(0.8); }
+  100% { transform: scaleX(1); }
+`
+const pulse = keyframes`
+  from { transform: scale(1); }
+  to { transform: scale(1.1); }
+`
+const shadow = keyframes`
+  0%   { text-shadow: 1px 1px 0px #333; }
+	50%   { text-shadow: 3px 3px 2px #333; }
+	100%  { text-shadow: 9px 10px 6px #999; }
+`
+const spin = keyframes`
+  from { transform: rotateY(0deg); }
+  to { transform: rotateY(-360deg); }
+`
+const swing = keyframes`
+  0% {
+    transform: rotateZ(0deg);
+    transform-origin: center top;
+  }
+  20% {
+    transform: rotateZ(15deg);
+    transform-origin: center top;
+  }
+  40% {
+    transform: rotateZ(-15deg);
+    transform-origin: center top;
+  }
+  60% {
+    transform: rotateZ(7deg);
+    transform-origin: center top;
+  }
+  80% {
+    transform: rotateZ(-7deg);
+    transform-origin: center top;
+  }
+  100% {
+    transform: rotateZ(0deg);
+    transform-origin: center top;
+  }
+`
+
+
+
 const fadeIn = keyframes`
@@ -86,75 +176,2 @@ from { opacity: 0; }
 
-const blur = keyframes`
-  from { filter: blur(0px); }
-  to { filter: blur(6px); }
-`
-const bounce = keyframes`
-  10% { transform: scaleY(0.9) translateY(5%); }
-  45% { transform: scaleY(1.2) translateY(-100%); }
-  65% { transform: scaleY(0.95) translateY(0); }
-  75% { transform: scaleY(1.05) translateY(-25%); }
-  85% { transform: scaleY(1) translateY(0); }
-  100% { transform: scaleY(1) translateY(0%); }
-`
-const flash = keyframes`
-  0%, 40%, 80% { opacity: 1; }
-  20%, 60%, 100% { opacity: 0; }
-`
-const float = keyframes`
-  0% { transform: translate(2%, -10%) rotate(-1deg); }
-  100% { transform: translate(-2%, 5%) rotate(3deg); }
-`
-const glowing = keyframes`
-  0% { color: inherit; text-shadow: none; }
-  2%, 59%, 64%, 79% { color: #fff; }
-  3%, 59%, 63%, 78% { text-shadow: 0px 0px 60px, 0 0 22px, 0 0 1em inherit, 0 0 0.5em inherit, 0 0 .1em inherit, 0 10px 3px #000; }
-  60% { color: inherit; text-shadow: none; }
-  75% { color: inherit; text-shadow: none; }
-`
-// const glowing = keyframes`
-//   0% { color: inherit; text-shadow: none; }
-//   2%, 59%, 64%, 79% { color: #fff; }
-//   3%, 59%, 63%, 78% { text-shadow: 0px 0px 60px, 0 0 22px, 0 0 1em #f00, 0 0 0.5em #f00, 0 0 .1em #f00, 0 10px 3px #000; }
-//   60% { color: inherit; text-shadow: none; }
-//   75% { color: inherit; text-shadow: none; }
-// `
-const jelly = keyframes`
-  0% { transform: scaleX(1); }
-  20% { transform: scaleX(0.9); }
-  50% { transform: scaleX(1.25); }
-  85% { transform: scaleX(0.8); }
-  100% { transform: scaleX(1); }
-`
-const pulse = keyframes`
-  from { transform: scale(1); }
-  to { transform: scale(1.1); }
-`
-const swing = keyframes`
-  0% {
-    transform: rotateZ(0deg);
-    transform-origin: center top;
-  }
-  20% {
-    transform: rotateZ(15deg);
-    transform-origin: center top;
-  }
-  40% {
-    transform: rotateZ(-15deg);
-    transform-origin: center top;
-  }
-  60% {
-    transform: rotateZ(7deg);
-    transform-origin: center top;
-  }
-  80% {
-    transform: rotateZ(-7deg);
-    transform-origin: center top;
-  }
-  100% {
-    transform: rotateZ(0deg);
-    transform-origin: center top;
-  }
-`
-
-
 const hang = keyframes`
@@ -279,2 +296,3 @@ 0% {
 
+
 const shakeMix = keyframes`
@@ -304,67 +322,81 @@ 0% { transform: translate(2px, 1px) rotate(0deg); }
 
-const spin = keyframes`
-  from { transform: rotateY(0deg); }
-  to { transform: rotateY(-360deg); }
-  /* 0% {
-    transform: rotateZ(0deg);
+
+const flip = keyframes`
+  to { transform: rotateX(1turn); }
+`
+const flipIn = keyframes`
+  0% {
+    transform: rotateX(180deg);
+    opacity: 0;
+  }
+  35% {
+    transform: rotateX(120deg);
+    opacity: 0;
+  }
+  65% {
+    opacity: 0;
+  }
+  100% {
+    transform: rotateX(360deg);
+    opacity: 1;
+  }
+`
+const flipOut = keyframes`
+  0% {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+  35% {
+    transform: rotateX(-40deg);
+    opacity: 1;
+  }
+  65% {
+    opacity: 0;
+  }
+  100% {
+    transform: rotateX(180deg);
+    opacity: 0;
+  }
+`
+const flipVertial2 = keyframes`
+  0% {
+    transform: perspective(1000px) rotateX(360deg);
     transform-origin: center;
   }
-  20% {
-    transform: rotateZ(-20deg);
-    transform-origin: center; }
-  70% {
-    transform: rotateZ(380deg);
-    transform-origin: center; }
   100% {
-    transform: rotateZ(360deg);
-    transform-origin: center; } */
+    transform: perspective(1000px) rotateX(0deg);
+    transform-origin: center;
+  }
 `
-const spinSlowDown = keyframes`
-  0% { transform:rotateZ(0deg)  }
-  5% { transform: rotateZ(1turn); }
-  10% { transform: rotateZ(2turn); }
-  20% { transform: rotateZ(3turn); }
-  40% { transform: rotateZ(4turn); }
-  70%, 100% { transform: rotateZ(5turn); }
-`
 const flipSlowDown = keyframes` // tbm
   0% {
     transform:rotateX(0deg);
-    transform-origin: 50% 100%;
   }
   5% {
     transform: rotateX(1turn);
-    transform-origin: 50% 100%;
   }
   10% {
     transform: rotateX(2turn);
-    transform-origin: 50% 100%;
   }
   20% {
     transform: rotateX(3turn);
-    transform-origin: 50% 100%;
   }
   40% {
     transform: rotateX(4turn);
-    transform-origin: 50% 100%;
   }
   70%, 100% {
     transform: rotateX(5turn);
-    transform-origin: 50% 100%;
   }
 `
-
-
 const flipToTop = keyframes`
   from {
     transform: rotateX(-90deg);
-    transform-origin: 50% 0;
+    transform-origin: center top;
     opacity: 1;
   }
   to {
-    transform: rotateX(90deg) translateY(-22px);
-    transform-origin: 50% 0;
+    transform: rotateX(90deg);
+    transform-origin: center top;
     opacity: 0;
   }
-
 `
@@ -416,6 +448,2 @@ const flipToBottom = keyframes`
   }
-  /* 100% {
-    transform: rotateY(-95deg)  translateX(-200px) ;
-    transform-origin: left;
-  } */
 `
@@ -436,64 +464,4 @@ const flipCenterToRight = keyframes`
 `
-const flipHorizontal = keyframes`
-  0% { transform: perspective(400px) rotateY(-360deg); }
-  50% { transform: perspective(400px) rotateY(-180deg); }
-  100% { transform: perspective(400px) rotateY(0deg); }
-`
-const flipHorizontal2 = keyframes`
-  0% { transform: perspective(400px) rotateY(-360deg); }
-  100% { transform: perspective(400px) rotateY(0deg); }
-`
-const flipVertial = keyframes`
-  0% { transform: perspective(400px) rotateX(-360deg); }
-  50% { transform: perspective(400px) rotateX(-180deg); }
-  100% { transform: perspective(400px) rotateX(0deg); }
-`
-const flipVertial2 = keyframes`
-  0% {
-    transform: perspective(1000px) rotateX(360deg);
-    transform-origin: center;
-  }
-  100% {
-    transform: perspective(1000px) rotateX(0deg);
-    transform-origin: center;
-  }
-`
-const flipIn = keyframes`
-  0% {
-    transform: rotateX(180deg);
-    opacity: 0;
-  }
-  35% {
-    transform: rotateX(120deg);
-    opacity: 0;
-  }
-  65% {
-    opacity: 0;
-  }
-  100% {
-    transform: rotateX(360deg);
-    opacity: 1;
-  }
-`
-const flipOut = keyframes`
-  0% {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-  35% {
-    transform: rotateX(-40deg);
-    opacity: 1;
-  }
-  65% {
-    opacity: 0;
-  }
-  100% {
-    transform: rotateX(180deg);
-    opacity: 0;
-  }
-`
 
 
-
-
 const slideInVertical = keyframes`
@@ -527,3 +495,2 @@ 0% {
 `
-
 const slideInAndOutVertical = keyframes`
@@ -553,3 +520,2 @@ 0% {
 
-
 const zoomIn = keyframes`
@@ -572,2 +538,10 @@ from { transform: scale(2); }
 `
+const rotateSlowDown = keyframes`
+  0% { transform:rotateZ(0deg)  }
+  5% { transform: rotateZ(1turn); }
+  10% { transform: rotateZ(2turn); }
+  20% { transform: rotateZ(3turn); }
+  40% { transform: rotateZ(4turn); }
+  70%, 100% { transform: rotateZ(5turn); }
+`
 
@@ -578,10 +552,16 @@
 const types = {
+
   blur: blur,
   bounce: bounce,
+  effect3D: effect3D,
   flash: flash,
+  float: float,
   glowing: glowing,
   jelly: jelly,
   pulse: pulse,
+  shadow: shadow,
+  spin: spin,
   swing: swing,
 
+
   fadeIn: fadeIn,
@@ -612,5 +592,8 @@ fadeInFromLeft: fadeInFromLeft,
 
-  spin: spin,
-  spinSlowDown: spinSlowDown,
+  rotateSlowDown: rotateSlowDown,
+  rotateCW: rotateCW,
+  rotateACW: rotateACW,
 
+  flip: flip,
+  flipVertial2: flipVertial2,
   flipSlowDown: flipSlowDown,
@@ -623,6 +606,3 @@ flipFromTop: flipFromTop,
   flipFromLeftToCenter: flipFromLeftToCenter,
-  flipHorizontal: flipHorizontal,
-  flipHorizontal2: flipHorizontal2,
   flipVertial: flipVertial,
-  flipVertial2: flipVertial2,
   flipIn: flipIn,
@@ -629,0 +609,0 @@ flipOut: flipOut,

src/typer.js

@@ -57,2 +57,1 @@ import React, { useState, useEffect } from 'react'
 `
-

webpack.config.js

@@ -30,2 +30,2 @@ var path = require("path");
   }
-};
+};

No alert changes

Improved metrics

Number of package files

9

12.5%

Number of lines in readme file

124

0.81%

Worsened metrics

Total package byte prevSize

86157

-1.47%

Lines of code

850

-1.28%

No dependency changes