motionrack - npm Package Compare versions

Comparing version 0.0.2-alpha to 0.1.0

dist/motionrack.js

@@ -101,2 +101,11 @@ /* # Motionrack core license
   const motionSheet = `
+  
+  .mr-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: hidden;
+    overflow-x: hidden;
+  }
+  
   .motionrack-wrap {
@@ -162,3 +171,3 @@ display: flex;
   
-  /* Hide the second set of boxes initially */
+  
   .hidden {
@@ -168,3 +177,2 @@ display: none;
   
-  /* Define CSS animations */
   
@@ -239,3 +247,3 @@
   
-  @keyframes maxRotateLeft {
+  @keyframes maxSpinLeft {
     from {
@@ -253,3 +261,3 @@ transform: rotate(0);
   
-  @keyframes maxRotateRight {
+  @keyframes maxSpinRight {
     from {
@@ -265,3 +273,3 @@ transform: rotate(0);
   
-  @keyframes minRotateLeft {
+  @keyframes minSpinLeft {
     from {
@@ -278,3 +286,3 @@ transform: rotate(90deg);
   
-  @keyframes minRotateRight {
+  @keyframes minSpinRight {
     from {
@@ -391,2 +399,6 @@ transform: rotate(-90deg);
   
+  
+  
+  
+  
   @keyframes bounceDown {
@@ -414,2 +426,29 @@ 0% {
   }
+  
+  
+  @keyframes flicker {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  
+  
+  @keyframes flare {
+    0%, 70% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  
+  
+  
   `;
@@ -558,2 +597,3 @@ motionStyler.appendChild(document.createTextNode(motionSheet));
     }
+  
   }
@@ -560,0 +600,0 @@ `;

package.json

 {
   "name": "motionrack",
-  "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.",
+  "version": "0.1.0",
+  "description": "A lightweight JavaScript library designed to simplify web page scrolling by animating elements as they come into view.",
   "main": "index.js",
@@ -10,2 +10,6 @@ "types": "types/index.d.ts",
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/demjhonsilver/motion.git"
+  },
   "keywords": [
@@ -18,6 +22,13 @@ "animation",
     "css",
-    "react"
+    "react",
+    "vue",
+    "angular",
+    "svelte"
   ],
+  "bugs": {
+    "url": "https://github.com/demjhonsilver/motionrack/issues"
+  },
+  "homepage": "https://github.com/demjhonsilver/motionrack",
   "author": "Demjhon Silver",
   "license": "MIT"
 }

README.md

 
+<p align="center">
 
+      <img src="https://raw.githubusercontent.com/demjhonsilver/motionrack/main/img/logo.png" alt="Logo" width="70" height="70"/>
+
+</p>
+
 <div align="center">
@@ -9,2 +14,3 @@
 ![Downloads](https://img.shields.io/npm/dt/motionrack.svg?&style=flat-square&label=Downloads&color=orange)
+[![License](https://img.shields.io/npm/l/motionrack.svg?style=flat-square&label=License&color=green)](https://github.com/demjhonsilver/motionrack/blob/main/LICENSE.md)
 </div>
@@ -26,6 +32,6 @@
 
-MotionRack is a lightweight JavaScript library designed to simplify the process of animating elements on a web page as they come into view. This library utilizes the Intersection Observer API to trigger animations when elements enter the viewport, making it easy to create engaging and interactive web experiences without the need for complex event handling or extensive JavaScript code.
+Motionrack is a lightweight JavaScript library designed to simplify web page scrolling by animating elements as they come into view. When elements enter the viewport, making it easy to create engaging and interactive web experiences without the need for complex event handling, mousewheel or extensive JavaScript code.
 
 ## Release-notes
-Version 0.0.2-alpha
+Version 0.1.0
 
@@ -38,16 +44,50 @@ -------
 Minor Changes:
+- Docs
 
-
 Patch changes:
 
-- Alpha test
 
 
+
 ## Features
 
+- Compatible for React, Vue, Angular and Svelte
 - Supports TypeScript
 
+animations | usage  |  supported tags
+------ | -------- | -------- | 
+`motionUp` | data-motionrack="motionUp" |  img, class, p, header, etc.  |
+`motionDown` |  data-motionrack="motionDown" | img, class, p, header, etc.  |
+`motionLeft` |  data-motionrack="motionLeft" | img, class, p, header, etc.  |
+`motionRight` | data-motionrack="motionRight"| img, class, p, header, etc.  | 
 
+---------
 
+- Animations
 
+ * | *  | *  | *  | *  |
+------ | -------- | -------- | -------- | ------------
+zoomIn | motionUp |  motionDown  | motionLeft | motionRight
+fadeIn |flipUp |  flipDown  | flipLeft | flipRight
+flash |  bounceUp| bounceDown | minSpinLeft | minSpinRight |
+flare | flicker| motionBounce |  maxSpinLeft  | maxSpinRight |
+------------------
+
+Optional layouts
+--------------
+class name to wrap:
+
+`motionrack-wrap`
+
+------
+
+layouts | quantity  | layers 
+------ | -------- | ------------- |
+`monoPad` | monoBox |  1 |
+`duoPad` | duoBox |   2 |
+`trioPad` | trioBox |  3 |
+
+
+
+
 ## Installation
@@ -63,4 +103,105 @@
 ## Example
+React
+-------------
+Direct method: `applicable for custom CSS, Bootstrap, Tailwind and Bulma`
+-----------
 
+- Bootstrap
 
+```js
+import { useEffect } from 'react';
+import { motionRack } from 'motionrack'; 
+
+export const ExampleComponent = () => {
+  useEffect(() => {
+    motionRack();
+  });
+
+  return (
+    <div>
+      <div className="btn btn-primary" data-motionrack="zoomIn">
+        zoomIn 
+      </div>
+    </div>
+  );
+};
+```
+
+- Tailwind
+
+```js
+import React, { useEffect } from 'react';
+import { motionRack } from 'motionrack'; 
+
+export const ExampleComponent = () => {
+  useEffect(() => {
+    motionRack();
+  });
+
+  return (
+    <div>
+      <div className="bg-blue-500 text-white px-4 py-2" data-motionrack="zoomIn">
+        zoomIn 
+      </div>
+    </div>
+  );
+};
+```
+------------
+Layouts method (optional)
+--------
+
+```js
+import { useEffect } from 'react';
+import { motionRack } from 'motionrack'; 
+
+export const ExampleComponent = () => {
+  useEffect(() => {
+    motionRack();
+  });
+
+  return (
+    <div>
+      <div className="motionrack-wrap">
+        <div className="monoPad">
+          <div className="monoBox" data-motionrack="zoomIn" style={{backgroundColor: 'gray'}}>
+          zoomIn 
+             </div>
+        </div>
+        <div className="duoPad">
+          <div className="duoBox" data-motionrack="motionLeft" style={{backgroundColor: 'gray'}}>
+            motionLeft
+          </div>
+          <div className="duoBox" data-motionrack="motionRight" style={{backgroundColor: 'gray'}}>
+            motionRight
+          </div>
+        </div>
+        <div className="monoPad">
+          <div className="monoBox" data-motionrack="motionDown" style={{backgroundColor: 'gray'}}>
+            motionDown</div>
+        </div>
+        <div className="duoPad">
+          <div className="duoBox" data-motionrack="flipUp" style={{backgroundColor: 'gray'}}>
+            flipUp
+          </div>
+          <div className="duoBox" data-motionrack="flipDown" style={{backgroundColor: 'gray'}}>
+            flipDown</div>
+        </div>
+        <div className="trioPad">
+          
+          <div className="trioBox" data-motionrack="flipLeft" style={{backgroundColor: 'gray'}}>
+            flipLeft
+          </div>
+          <div className="trioBox" data-motionrack="fadeIn" style={{backgroundColor: 'gray'}}>
+            fadeIn</div>
+          <div className="trioBox" data-motionrack="flipRight" style={{backgroundColor: 'gray'}}>
+            flipRight</div>
+        </div>
+      </div>
+   
+    </div>
+  );
+};
+```
+
 ## License
@@ -67,0 +208,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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28815

increased by18.79%

Lines of code

536

increased by4.69%

Number of low maintenance alerts

0

decreased by-100%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

211

increased by201.43%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes