motionrack - npm Package Compare versions

Comparing version 1.0.0-alpha.4 to 1.0.0-beta.1

dist/motionrack.js

@@ -27,2 +27,4 @@ /* # Motionrack core license
 
+  import './animation.js';
+
   const animatedElements = new Set();
@@ -127,352 +129,87 @@
 
-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;
-}
-
-
-
-@keyframes motionUp {
-  from {
-      transform: translateY(100px);
-      opacity: 0;
+  const motionStylerLayout = document.createElement('style');
+  document.head.appendChild(motionStylerLayout);
+  const motionSheetLayout = `
+  
+  .mr-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: hidden;
+    overflow-x: hidden;
   }
-  to {
-      transform: translateY(0);
-      opacity: 1;
+  
+  .motionrack-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    width: auto;
+    max-width: 1140px;
+    margin: 0 auto;
   }
-}
-
-@keyframes motionLeft {
-  from {
-      transform: translateX(-100px);
-      opacity: 0;
+  
+  
+  .monoPad {
+    display: flex;
+    justify-content: center;
   }
-  to {
-      transform: translateX(0);
-      opacity: 1;
+  
+  .monoBox {
+    width: 999px; 
+    min-height: 200px;
+    height: auto;
+    max-height: 670px;
+    display: flex;
+    opacity: 0;
+    margin: 10px;
   }
-}
-
-@keyframes motionRight {
-  from {
-      transform: translateX(100px);
-      opacity: 0;
+  
+  .duoPad {
+    display: flex;
+    justify-content: center;
   }
-  to {
-      transform: translateX(0);
-      opacity: 1;
+  
+  
+  .duoBox {
+    width: 490px;
+    min-height: 200px;
+    height: auto;
+    max-height: 670px; 
+    display: flex;
+    opacity: 0;
+    margin: 10px;
   }
-}
-
-
-@keyframes motionDown {
-  from {
-      transform: translateY(-100px);
-      opacity: 0;
+  
+  
+  .trioPad {
+    display: flex;
+    justify-content: center;
   }
-  to {
-      transform: translateY(0);
-      opacity: 1;
+  
+  
+  .trioBox {
+    width: 320px; 
+    min-height: 200px;
+    height: auto;
+    max-height: 670px; 
+    display: flex;
+    opacity: 0;
+    margin: 10px;
   }
-}
-
-@keyframes fadeIn {
-  from {
-      opacity: 0;
+  
+  
+  .hidden {
+    display: none;
   }
-  to {
-      opacity: 1;
-  }
-}
+  
+  `;
+  motionStylerLayout.appendChild(document.createTextNode(motionSheetLayout));
 
 
-@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;
-  }
-}
-
-
-
-
-`;
-motionStyler.appendChild(document.createTextNode(motionSheet));
-
 const  motionRQuery = document.createElement('style');
@@ -479,0 +216,0 @@ document.head.appendChild(motionRQuery);

package.json

 {
   "name": "motionrack",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-beta.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.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -10,2 +10,3 @@ <p align="center">
 [![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)
+![Package Size](https://img.shields.io/bundlephobia/minzip/motionrack?style=flat-square&color=white)
 ![Downloads](https://img.shields.io/npm/dt/motionrack.svg?&style=flat-square&label=Downloads&color=orange)
@@ -24,3 +25,6 @@ [![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)
 - [Sample](#sample)
-- [Example](#example)
+- [React](#react)
+- [Vue](#vue)
+- [Svelte](#svelte)
+- [Angular](#angular)
 
@@ -33,4 +37,19 @@
 
+
+
+Frameworks / Libraries | Tested versions
+------ | -------- | 
+ ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) | 18 & above
+![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)  | 3 & above
+![Angular](https://img.shields.io/badge/angular-%23DD0031.svg?style=for-the-badge&logo=angular&logoColor=white)  | 16 & above
+![Svelte](https://img.shields.io/badge/svelte-%23f1413d.svg?style=for-the-badge&logo=svelte&logoColor=white) | 3 & above
+
+
+
+-----
+
+
+
 ## Release-notes
-Version 1.0.0-alpha.4
+Version 1.0.0-beta.1
 
@@ -122,6 +141,7 @@ -------
 
-## Example
-React
+## React
 -------------
+
 Direct method: 
+
 -------------
@@ -195,2 +215,78 @@
 ```
+
+## Vue
+
+```js
+<template>
+  <div>
+    <div class="btn btn-primary" data-motion-hold="expand 1.4s">
+      expand
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted } from 'vue';
+import { motionRack } from 'motionrack';
+
+export default {
+  setup() {
+    onMounted(() => {
+      motionRack();
+    });
+  },
+};
+</script>
+```
+## Svelte
+
+```js
+<script>
+  import { onMount } from "svelte";
+  import { motionRack } from "motionrack";
+
+  onMount(() => {
+    motionRack();
+  });
+</script>
+
+<div>
+  <div class="btn btn-primary" data-motion-hold="expand 1.4s">
+    expand
+  </div>
+</div>
+```
+
+
+## Angular
+
+```ts
+import { Component, OnInit } from '@angular/core';
+import { motionRack } from 'motionrack';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <div>
+      <div class="btn btn-primary" data-motion-hold="expand 1.4s">
+        expand
+      </div>
+    </div>
+  `,
+})
+export class ExampleComponent implements OnInit {
+  ngOnInit() {
+    motionRack();
+  }
+}
+```
+
+
+
+
+
+
+
+
+
 ------------
@@ -197,0 +293,0 @@ Layouts method (optional)

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

Total package byte prevSize

33193

increased by11.61%

Number of package files

10

increased by11.11%

Lines of code

580

increased by4.32%

Number of lines in readme file

352

increased by37.5%

No dependency changes