motionrack - npm Package Compare versions

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

dist/motionrack.js

@@ -27,3 +27,2 @@ /* # Motionrack core license
   import './css/animation.css';
-  import './css/layout.css';
 
@@ -130,3 +129,231 @@
 
+const motionStyler = document.createElement('style');
+document.head.appendChild(motionStyler);
+const motionSheet = `
 
+.mr-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: hidden;
+  overflow-x: hidden;
+}
+
+.motionrack-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  width: auto;
+  max-width: 1140px;
+  margin: 0 auto;
+}
+
+
+.monoPad {
+  display: flex;
+  justify-content: center;
+}
+
+.monoBox {
+  width: 999px; 
+  min-height: 200px;
+  height: auto;
+  max-height: 670px;
+  display: flex;
+  opacity: 0;
+  margin: 10px;
+}
+
+.duoPad {
+  display: flex;
+  justify-content: center;
+}
+
+
+.duoBox {
+  width: 490px;
+  min-height: 200px;
+  height: auto;
+  max-height: 670px; 
+  display: flex;
+  opacity: 0;
+  margin: 10px;
+}
+
+
+.trioPad {
+  display: flex;
+  justify-content: center;
+}
+
+
+.trioBox {
+  width: 320px; 
+  min-height: 200px;
+  height: auto;
+  max-height: 670px; 
+  display: flex;
+  opacity: 0;
+  margin: 10px;
+}
+
+
+.hidden {
+  display: none;
+}
+
+
+
+
+`;
+motionStyler.appendChild(document.createTextNode(motionSheet));
+
+const  motionRQuery = document.createElement('style');
+document.head.appendChild(motionRQuery);
+const rackMQuery = `
+@media (max-width: 1060px) {
+  .monoPad {
+      width: 100%;
+  }
+  .monoBox {
+      width:940px;
+  }
+  .duoPad {
+      width: 100%;
+  }
+  .duoBox {
+      width: 460px; 
+  }
+  .trioPad {
+      width: 100%;
+  }
+  .trioBox {
+      width: 300px; 
+  }
+}
+`;
+
+motionRQuery.appendChild(document.createTextNode(rackMQuery));
+
+const  motionRQuery2 = document.createElement('style');
+document.head.appendChild(motionRQuery2);
+const rackMQuery2 = `
+@media (max-width: 740px) {
+
+  .duoPad{
+      flex-direction: column; 
+      align-items: center;
+  }
+  .duoBox {
+      max-width: 350px;
+      width: 100%;
+      display: flex;
+      justify-content: center; 
+      align-items: center; 
+  }
+  .trioPad {
+      width: 100%;
+  }
+  .trioBox {
+      width:940px;
+  }
+}
+`;
+
+motionRQuery2.appendChild(document.createTextNode(rackMQuery2));
+
+
+const  motionRQuery3= document.createElement('style');
+document.head.appendChild(motionRQuery3);
+const rackMQuery3 = `
+@media (max-width: 630px) {
+  .monoPad {
+      flex-direction: column; 
+      align-items: center; 
+  }
+  .monoBox {
+      max-width: 350px;
+      margin: 5px;
+      width: 100%; 
+      display: flex;
+      justify-content: center; 
+      align-items: center; 
+  }
+  .duoPad {
+      flex-direction: column; 
+      align-items: center; 
+
+  }
+  .duoBox {
+      max-width: 350px;
+      margin: 5px;
+      width: 100%; 
+      display: flex;
+      justify-content: center; 
+      align-items: center; 
+  }
+  .trioPad {
+      flex-direction: column; 
+      align-items: center; 
+  }
+  .trioBox {
+      max-width: 350px;
+      width: 100%;
+      display: flex;
+      justify-content: center; 
+      align-items: center; 
+  }
+}
+`;
+motionRQuery3.appendChild(document.createTextNode(rackMQuery3));
+
+const  motionRQuery4= document.createElement('style');
+document.head.appendChild(motionRQuery4);
+const rackMQuery4 = `
+@media (max-width: 400px) {
+  .monoPad {
+      flex-direction: column; 
+      align-items: center; 
+  }
+  .monoBox {
+      max-width: 300px;
+      margin: 5px;
+      width: 100%; 
+      display: flex;
+      justify-content: center; 
+      align-items: center;
+  }
+  .duoPad {
+      flex-direction: column; 
+      align-items: center; 
+
+  }
+  .duoBox {
+      max-width: 300px;
+      margin: 5px;
+      width: 100%; 
+      display: flex;
+      justify-content: center;
+      align-items: center; 
+  }
+  .trioPad {
+      flex-direction: column; 
+      align-items: center; 
+  }
+  .trioBox {
+      max-width: 300px;
+      margin: 5px;
+      width: 100%;
+      display: flex;
+      justify-content: center; 
+      align-items: center; 
+  }
+
+}
+`;
+
+motionRQuery4.appendChild(document.createTextNode(rackMQuery4));
+
   /* # Motionrack core license
@@ -133,0 +360,0 @@

package.json

 {
   "name": "motionrack",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "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.2
+Version 1.0.0-alpha.3
 
@@ -35,0 +35,0 @@ -------

types/index.d.ts

@@ -1,2 +0,2 @@
-declare module 'motionRack' {
+declare module 'motionrack' {
   // Define your types here:
@@ -8,7 +8,4 @@ type AnimationOptions = {
 
-  // Define the motionRack function
-  function motionRack(options?: AnimationOptions): void;
-
   // Export the motionRack function
-  export default motionRack;
+  export const motionRack: (options?: AnimationOptions) => void;
 }

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

Improved metrics

Lines of code

575

increased by0.7%

Worsened metrics

Total package byte prevSize

31544

decreased by-2.52%

Number of package files

10

decreased by-9.09%

No dependency changes