motionrack - npm Package Compare versions

Comparing version 1.0.0-alpha.3 to 1.0.0-alpha.4

dist/motionrack.js

@@ -26,5 +26,3 @@ /* # Motionrack core license
   SOFTWARE. */
-  import './css/animation.css';
 
-
   const animatedElements = new Set();
@@ -208,3 +206,270 @@
 
+@keyframes motionUp {
+  from {
+      transform: translateY(100px);
+      opacity: 0;
+  }
+  to {
+      transform: translateY(0);
+      opacity: 1;
+  }
+}
 
+@keyframes motionLeft {
+  from {
+      transform: translateX(-100px);
+      opacity: 0;
+  }
+  to {
+      transform: translateX(0);
+      opacity: 1;
+  }
+}
+
+@keyframes motionRight {
+  from {
+      transform: translateX(100px);
+      opacity: 0;
+  }
+  to {
+      transform: translateX(0);
+      opacity: 1;
+  }
+}
+
+
+@keyframes motionDown {
+  from {
+      transform: translateY(-100px);
+      opacity: 0;
+  }
+  to {
+      transform: translateY(0);
+      opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+      opacity: 0;
+  }
+  to {
+      opacity: 1;
+  }
+}
+
+
+@keyframes expand {
+  from {
+      transform: scale(0);
+      opacity: 0;
+  }
+  to {
+      transform: scale(1);
+      opacity: 1;
+  }
+}
+
+
+@keyframes maxSpinLeft {
+  from {
+      transform: rotate(0);
+      opacity: 0;
+  }
+  to {
+      transform: rotate(-360deg);
+      opacity: 1;
+  }
+}
+
+
+
+@keyframes maxSpinRight {
+  from {
+      transform: rotate(0);
+      opacity: 0;
+  }
+  to {
+      transform: rotate(360deg);
+      opacity: 1;
+  }
+}
+
+@keyframes minSpinLeft {
+  from {
+      transform: rotate(90deg);
+      opacity: 0;
+  }
+  to {
+      transform: rotate(0);
+      opacity: 1;
+  }
+}
+
+
+@keyframes minSpinRight {
+  from {
+      transform: rotate(-90deg);
+      opacity: 0;
+  }
+  to {
+      transform: rotate(0);
+      opacity: 1;
+  }
+}
+
+@keyframes flipUp {
+  from {
+      transform: perspective(400px) rotateX(-90deg);
+      opacity: 0;
+  }
+  to {
+      transform: perspective(400px) rotateX(0);
+      opacity: 1;
+  }
+}
+
+@keyframes flipDown {
+  from {
+      transform: perspective(400px) rotateX(90deg);
+      opacity: 0;
+  }
+  to {
+      transform: perspective(400px) rotateX(0);
+      opacity: 1;
+  }
+}
+
+
+
+@keyframes flipLeft {
+  from {
+      transform: perspective(400px) rotateY(90deg);
+      opacity: 0;
+  }
+  to {
+      transform: perspective(400px) rotateY(0);
+      opacity: 1;
+  }
+}
+
+@keyframes flipRight {
+  from {
+      transform: perspective(400px) rotateY(-90deg);
+      opacity: 0;
+  }
+  to {
+      transform: perspective(400px) rotateY(0);
+      opacity: 1;
+  }
+}
+
+
+
+@keyframes flash {
+  0%, 50%, 100% {
+      opacity: 1;
+  }
+  25%, 75% {
+      opacity: 0;
+  }
+}
+
+
+
+@keyframes motionBounce {
+  from {
+      transform: scale(0.5);
+      opacity: 0;
+  }
+  25% {
+      transform: scale(1.1);
+  }
+  50% {
+      transform: scale(0.9);
+  }
+  75% {
+      transform: scale(1.05);
+  }
+  to {
+      transform: scale(1);
+      opacity: 1;
+  }
+}
+
+
+
+
+@keyframes bounceUp {
+  0% {
+      transform: translateY(100px);
+      opacity: 0;
+  }
+  70% {
+      transform: translateY(0);
+      opacity: 1;
+  }
+  85% {
+      transform: translateY(-20px);
+      opacity: 1;
+  }
+  100% {
+      transform: translateY(0);
+      opacity: 1;
+  }
+}
+
+
+
+
+
+@keyframes bounceDown {
+  0% {
+      transform: translateY(-100px);
+      opacity: 0;
+  }
+  10% {
+      transform: translateY(-100px);
+      opacity: 0;
+  }
+  25% {
+      transform: translateY(0);
+      opacity: 1;
+  }
+  40% {
+      transform: translateY(20px);
+      opacity: 1;
+  }
+  100% {
+      transform: translateY(0);
+      opacity: 1;
+  }
+}
+
+
+@keyframes flicker {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+
+@keyframes flare {
+  0%, 70% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+
+
+
 `;
@@ -211,0 +476,0 @@ motionStyler.appendChild(document.createTextNode(motionSheet));

package.json

 {
   "name": "motionrack",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "description": "A free and open source JavaScript library for React, Vue, Angular and Svelte about web page scrolling by animating elements as they come into view.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -32,3 +32,3 @@ <p align="center">
 ## Release-notes
-Version 1.0.0-alpha.3
+Version 1.0.0-alpha.4
 
@@ -35,0 +35,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

29739

decreased by-5.72%

Number of package files

9

decreased by-10%

Lines of code

556

decreased by-3.3%

No dependency changes