motionrack - npm Package Compare versions

Comparing version 0.0.1-alpha to 0.0.2-alpha

dist/motionrack.js

@@ -109,4 +109,3 @@ /* # Motionrack core license
     max-width: 1140px;
-    margin: 0 auto; 
-    text-align: center;
+    margin: 0 auto;
   }
@@ -124,9 +123,4 @@
     height: auto;
-    max-height: 570px;
-    background-color: #3498db;
-    color: #fff;
-    font-size: 24px;
+    max-height: 670px;
     display: flex;
-    justify-content: center;
-    align-items: center;
     opacity: 0;
@@ -146,9 +140,4 @@ margin: 10px;
     height: auto;
-    max-height: 570px; 
-    background-color: #3498db;
-    color: #fff;
-    font-size: 24px;
+    max-height: 670px; 
     display: flex;
-    justify-content: center;
-    align-items: center;
     opacity: 0;
@@ -169,9 +158,4 @@ margin: 10px;
     height: auto;
-    max-height: 570px; 
-    background-color: #3498db;
-    color: #fff;
-    font-size: 24px;
+    max-height: 670px; 
     display: flex;
-    justify-content: center;
-    align-items: center;
     opacity: 0;
@@ -189,3 +173,3 @@ margin: 10px;
   
-  @keyframes slideInUp {
+  @keyframes motionUp {
     from {
@@ -201,3 +185,3 @@ transform: translateY(100px);
   
-  @keyframes slideInLeft {
+  @keyframes motionLeft {
     from {
@@ -213,3 +197,3 @@ transform: translateX(-100px);
   
-  @keyframes slideInRight {
+  @keyframes motionRight {
     from {
@@ -226,3 +210,3 @@ transform: translateX(100px);
   
-  @keyframes slideInDown {
+  @keyframes motionDown {
     from {
@@ -260,5 +244,3 @@ transform: translateY(-100px);
   
-  
-  /* Define new CSS animations */
-  @keyframes rotateIn {
+  @keyframes maxRotateLeft {
     from {
@@ -269,3 +251,3 @@ transform: rotate(0);
     to {
-        transform: rotate(360deg);
+        transform: rotate(-360deg);
         opacity: 1;
@@ -277,18 +259,20 @@ }
   
-  @keyframes bounceIn {
+  @keyframes maxRotateRight {
     from {
-        transform: scale(0.5);
+        transform: rotate(0);
         opacity: 0;
     }
-    25% {
-        transform: scale(1.1);
+    to {
+        transform: rotate(360deg);
+        opacity: 1;
     }
-    50% {
-        transform: scale(0.9);
+  }
+  
+  @keyframes minRotateLeft {
+    from {
+        transform: rotate(90deg);
+        opacity: 0;
     }
-    75% {
-        transform: scale(1.05);
-    }
     to {
-        transform: scale(1);
+        transform: rotate(0);
         opacity: 1;
@@ -299,5 +283,3 @@ }
   
-  /* Define more CSS animations */
-  
-  @keyframes rotateInClockwise {
+  @keyframes minRotateRight {
     from {
@@ -313,5 +295,5 @@ transform: rotate(-90deg);
   
-  @keyframes flipInX {
+  @keyframes flipUp {
     from {
-        transform: perspective(400px) rotateX(90deg);
+        transform: perspective(400px) rotateX(-90deg);
         opacity: 0;
@@ -325,5 +307,5 @@ }
   
-  @keyframes flipInXReverse {
+  @keyframes flipDown {
     from {
-        transform: perspective(400px) rotateX(-90deg);
+        transform: perspective(400px) rotateX(90deg);
         opacity: 0;
@@ -337,3 +319,5 @@ }
   
-  @keyframes flipInY {
+  
+  
+  @keyframes flipLeft {
     from {
@@ -349,3 +333,3 @@ transform: perspective(400px) rotateY(90deg);
   
-  @keyframes flipInYReverse {
+  @keyframes flipRight {
     from {
@@ -372,4 +356,5 @@ transform: perspective(400px) rotateY(-90deg);
   
-  @keyframes bounce {
   
+  
+  @keyframes motionBounce {
     from {
@@ -379,16 +364,21 @@ transform: scale(0.5);
     }
-    
-    0%, 20%, 50%, 80%, 100% {
-        transform: translateY(0);
+    25% {
+        transform: scale(1.1);
     }
-    40% {
-        transform: translateY(-30px);
+    50% {
+        transform: scale(0.9);
     }
-    60% {
-        transform: translateY(-15px);
+    75% {
+        transform: scale(1.05);
     }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
   }
   
   
-  @keyframes slideInUpWithBounce {
+  
+  
+  @keyframes bounceUp {
     0% {
@@ -412,3 +402,3 @@ transform: translateY(100px);
   
-  @keyframes slideInDownWithBounce {
+  @keyframes bounceDown {
     0% {
@@ -415,0 +405,0 @@ transform: translateY(-100px);

package.json

 {
   "name": "motionrack",
-  "version": "0.0.1-alpha",
+  "version": "0.0.2-alpha",
   "description": "A lightweight JavaScript library designed to simplify the process of animating elements on a web page as they come into view.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -28,3 +28,3 @@
 ## Release-notes
-Version 0.0.1-alpha
+Version 0.0.2-alpha
 
@@ -31,0 +31,0 @@ -------

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

24258

decreased by-1.73%

Lines of code

512

decreased by-2.48%

No dependency changes