motionrack - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0-alpha.1

dist/motionrack.js

@@ -26,3 +26,6 @@ /* # Motionrack core license
   SOFTWARE. */
+  import './css/animation.css';
+  import './css/layout.css';
 
+
   const animatedElements = new Set();
@@ -40,15 +43,41 @@
   export function motionRack() {
-    const motionElements = document.querySelectorAll('[data-motionrack]');
+    const motionElementHold = document.querySelectorAll('[data-motion-hold]');
   
-    const options = {
+    const optionHold = {
       root: null,
       rootMargin: '0px',
-      threshold: 0.5,
+      threshold: 0.8,
     };
   
-    if (motionElements.length > 0) {
+    if (motionElementHold.length > 0) {
+      const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const motionData = entry.target.getAttribute('data-motion-hold').split(' ');
+            const animationName = motionData[0];
+            const animationDuration = motionData[1] || '2.5s';
+            entry.target.style.animation = `${animationName} ${animationDuration} forwards`;
+            observer.unobserve(entry.target);
+          }
+        });
+      }, optionHold);
+  
+      motionElementHold.forEach(element => {
+        observer.observe(element);
+      });
+    }
+  
+    const motionElementRelease = document.querySelectorAll('[data-motion-release]');
+  
+    const optionRelease = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.8,
+    };
+  
+    if (motionElementRelease.length > 0) {
       const observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            const motionData = entry.target.getAttribute('data-motionrack').split(' ');
+            const motionData = entry.target.getAttribute('data-motion-release').split(' ');
             const animationName = motionData[0];
@@ -70,5 +99,5 @@ const animationDuration = motionData[1] || '2.5s';
         });
-      }, options);
+      }, optionRelease);
   
-      motionElements.forEach((element) => {
+      motionElementRelease.forEach((element) => {
         observer.observe(element);
@@ -86,5 +115,5 @@ });
         });
-      }, options);
+      }, optionRelease);
   
-      motionElements.forEach((element) => {
+      motionElementRelease.forEach((element) => {
         resetObserver.observe(element);
@@ -101,524 +130,30 @@ });
   
+
+
+
+
+  /* # Motionrack core license
   
-  const motionStyler = document.createElement('style');
-  document.head.appendChild(motionStyler);
-  const motionSheet = `
+  Motionrack is released under the MIT license:
   
-  .mr-wrap {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: hidden;
-    overflow-x: hidden;
-  }
+  MIT License
   
-  .motionrack-wrap {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: hidden;
-    overflow-x: hidden;
-    width: auto;
-    max-width: 1140px;
-    margin: 0 auto;
-  }
+  Copyright (c) [2023-present] [Demjhon Silver]
   
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
   
-  .monoPad {
-    display: flex;
-    justify-content: center;
-  }
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
   
-  .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;
-  }
-  
-  
-  
-  @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 zoomIn {
-    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;
-    }
-  }
-  
-  
-  
-  
-  `;
-  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
-    
-    Motionrack is released under the MIT license:
-    
-    MIT License
-    
-    Copyright (c) [2023-present] [Demjhon Silver]
-    
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-    
-    The above copyright notice and this permission notice shall be included in all
-    copies or substantial portions of the Software.
-    
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-    SOFTWARE. */
-  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE. */

package.json

 {
   "name": "motionrack",
-  "version": "0.1.1",
-  "description": "A lightweight JavaScript library designed to simplify web page scrolling by animating elements as they come into view.",
+  "version": "1.0.0-alpha.1",
+  "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.",
   "main": "index.js",
@@ -6,0 +6,0 @@ "types": "types/index.d.ts",

README.md

@@ -9,3 +9,3 @@ <p align="center">
 --------
-[![npm version](https://img.shields.io/npm/v/motionrack.svg?logo=npm&style=flat-square&label=Stable&color=blue)](https://www.npmjs.com/package/motionrack)
+[![npm version](https://img.shields.io/npm/v/motionrack.svg?logo=npm&style=flat-square&label=Latest&color=blue)](https://www.npmjs.com/package/motionrack)
 ![Downloads](https://img.shields.io/npm/dt/motionrack.svg?&style=flat-square&label=Downloads&color=orange)
@@ -21,5 +21,5 @@ [![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)
 - [Release Notes](#release-notes)
+- [Installation](#installation)
+- [Features](#features)
 - [Sample](#sample)
-- [Features](#features)
-- [Installation](#installation)
 - [Example](#example)
@@ -31,6 +31,6 @@
 
-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.
+Motionrack is 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. When elements enter the viewport, making it easy to create engaging and interactive web experiences.
 
 ## Release-notes
-Version 0.1.1
+Version 1.0.0-alpha.1
 
@@ -40,16 +40,18 @@ -------
 Major Changes:
+- Two syntax tags `data-motion-hold` & `data-motion-release`
+- Can set any time duration or delay for animations
 
-
 Minor Changes:
-- Docs
+- zoomIn renamed into expand
 
 Patch changes:
-- Fixed the readme docs
+- Add docs for speed
 
-## Sample
-------
-Sample website that used Motionrack
+## Installation
 
-[energize-coffee-house](https://energize-coffee-house.vercel.app)
+To install the motionrack, you can use the following npm command:
 
+```bash
+npm install motionrack
+```
 
@@ -61,12 +63,34 @@ ## Features
 
-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.  | 
+name of animations | default syntax  | syntax with time duration  |  animation effect 
+------ | -------- | -------- | -------- | 
+`motionUp` | data-motion-hold="motionUp" |  data-motion-hold="motionUp 5s"  | 5 seconds one time
+`motionUp` |  data-motion-release="motionUp" | data-motion-release="motionUp 5s"  | 5 seconds continue if appeared while scrolling
 
+----
+
+You can set any number for `Time Duration`
+
+time syntax | value | speed |
+------ | -------- | ---------------
+0.1s | 0.1 seconds | superfast
+0.2s | 0.2 seconds | 
+0.3s | 0.3 seconds | 
+0.4s | 0.4 seconds | 
+0.5s | 0.5 seconds | semi-fast
+0.6s | 0.6 seconds | 
+0.7s | 0.7 seconds | 
+0.8s | 0.8 seconds | 
+0.9s | 0.9 seconds | fast
+1s | 1 seconds | moderate
+2s | 2 seconds | 
+2.5s | 2.5 seconds | default
+3s | 3 seconds | slow
+4s | 4 seconds | delay
+5s | 5 seconds | super-delay
+-----------
+
+
 ---------
 ```html
-zoomIn, motionUp, motionDown, motionLeft, motionRight
+expand, motionUp, motionDown, motionLeft, motionRight
 fadeIn, flipUp, flipDown, flipLeft, flipRight
@@ -81,3 +105,3 @@ flash, bounceUp| bounceDown, minSpinLeft, minSpinRight
 --------------
-class name to wrap:
+Class name to wrap:
 
@@ -95,13 +119,8 @@ `motionrack-wrap`
 
+## Sample
+------
+Sample website that used Motionrack
 
+[energize-coffee-house](https://energize-coffee-house.vercel.app)
 
-## Installation
-
-To install the motionrack, you can use the following npm command:
-
-```bash
-npm install motionrack
-```
-
-
 ## Example
@@ -130,4 +149,4 @@ React
     <div>
-      <div className="btn btn-primary" data-motionrack="zoomIn">
-        zoomIn 
+      <div className="btn btn-primary" data-motion-hold="expand 0.4s">
+        expand 
       </div>
@@ -142,3 +161,3 @@ </div>
 ```js
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { motionRack } from 'motionrack'; 
@@ -153,4 +172,4 @@
     <div>
-      <div className="bg-blue-500 text-white px-4 py-2" data-motionrack="zoomIn">
-        zoomIn 
+      <div className="bg-blue-500 text-white px-4 py-2" data-motion-release="expand 4s">
+        expand 
       </div>
@@ -161,2 +180,23 @@ </div>
 ```
+
+- Bulma
+
+```js
+import { useEffect } from 'react';
+import { motionRack } from 'motionrack'; 
+
+export const ExampleComponent = () => {
+  useEffect(() => {
+    motionRack();
+  });
+
+  return (
+    <div>
+      <div className="box has-background-primary has-text-white p-4" data-motion-release="expand">
+        expand
+      </div>
+    </div>
+  );
+};
+```
 ------------
@@ -179,11 +219,11 @@ Layouts method (optional)
         <div className="monoPad">
-          <div className="monoBox" data-motionrack="zoomIn" style={{backgroundColor: 'gray'}}>
-          zoomIn 
+          <div className="monoBox" data-motion-hold="expand 0.9s" style={{backgroundColor: 'gray'}}>
+          expand 
              </div>
         </div>
         <div className="duoPad">
-          <div className="duoBox" data-motionrack="motionLeft" style={{backgroundColor: 'gray'}}>
+          <div className="duoBox" data-motion-release="motionLeft" style={{backgroundColor: 'gray'}}>
             motionLeft
           </div>
-          <div className="duoBox" data-motionrack="motionRight" style={{backgroundColor: 'gray'}}>
+          <div className="duoBox" data-motion-hold="motionRight" style={{backgroundColor: 'gray'}}>
             motionRight
@@ -193,10 +233,10 @@ </div>
         <div className="monoPad">
-          <div className="monoBox" data-motionrack="motionDown" style={{backgroundColor: 'gray'}}>
+          <div className="monoBox" data-motion-release="motionDown" style={{backgroundColor: 'gray'}}>
             motionDown</div>
         </div>
         <div className="duoPad">
-          <div className="duoBox" data-motionrack="flipUp" style={{backgroundColor: 'gray'}}>
+          <div className="duoBox" data-motion-release="flipUp" style={{backgroundColor: 'gray'}}>
             flipUp
           </div>
-          <div className="duoBox" data-motionrack="flipDown" style={{backgroundColor: 'gray'}}>
+          <div className="duoBox" data-motion-release="flipDown" style={{backgroundColor: 'gray'}}>
             flipDown</div>
@@ -206,8 +246,8 @@ </div>
           
-          <div className="trioBox" data-motionrack="flipLeft" style={{backgroundColor: 'gray'}}>
+          <div className="trioBox" data-motion-release="flipLeft" style={{backgroundColor: 'gray'}}>
             flipLeft
           </div>
-          <div className="trioBox" data-motionrack="fadeIn" style={{backgroundColor: 'gray'}}>
+          <div className="trioBox" data-motion-release="fadeIn" style={{backgroundColor: 'gray'}}>
             fadeIn</div>
-          <div className="trioBox" data-motionrack="flipRight" style={{backgroundColor: 'gray'}}>
+          <div className="trioBox" data-motion-release="flipRight" style={{backgroundColor: 'gray'}}>
             flipRight</div>
@@ -214,0 +254,0 @@ </div>

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Total package byte prevSize

32368

increased by12.02%

Number of package files

11

increased by22.22%

Lines of code

571

increased by6.53%

Number of lines in readme file

256

increased by18.52%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes