Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
motionrack
Advanced tools
motionrack - npm Package Compare versions
Comparing version 1.0.0-beta.2 to 1.0.0-beta.3
@@ -41,3 +41,3 @@ /* # Motionrack core license | ||
| export function motionRack() { | ||
| const motionElementHold = document.querySelectorAll('[data-motion-hold]'); | ||
| const motionElementHold = document.querySelectorAll('[data-motionrack-once]'); | ||
@@ -47,3 +47,3 @@ const optionHold = { | ||
| rootMargin: '0px', | ||
| threshold: 0.8, | ||
| threshold: .90, | ||
| }; | ||
@@ -55,3 +55,3 @@ | ||
| if (entry.isIntersecting) { | ||
| const motionData = entry.target.getAttribute('data-motion-hold').split(' '); | ||
| const motionData = entry.target.getAttribute('data-motionrack-once').split(' '); | ||
| const animationName = motionData[0]; | ||
@@ -70,3 +70,3 @@ const animationDuration = motionData[1] || '2.5s'; | ||
| const motionElementRelease = document.querySelectorAll('[data-motion-release]'); | ||
| const motionElementRelease = document.querySelectorAll('[data-motionrack]'); | ||
@@ -83,3 +83,3 @@ const optionRelease = { | ||
| if (entry.isIntersecting) { | ||
| const motionData = entry.target.getAttribute('data-motion-release').split(' '); | ||
| const motionData = entry.target.getAttribute('data-motionrack').split(' '); | ||
| const animationName = motionData[0]; | ||
@@ -86,0 +86,0 @@ const animationDuration = motionData[1] || '2.5s'; |
| { | ||
| "name": "motionrack", | ||
| "version": "1.0.0-beta.2", | ||
| "version": "1.0.0-beta.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", |
@@ -52,3 +52,3 @@ <p align="center"> | ||
| ## Release-notes | ||
| Version 1.0.0-beta.2 | ||
| Version 1.0.0-beta.3 | ||
@@ -58,5 +58,6 @@ ------- | ||
| Major Changes: | ||
| - Two syntax tags `data-motion-hold` & `data-motion-release` | ||
| - Two syntax tags `data-motionrack` & `data-motionrack-once` | ||
| - Can set any time duration or delay for animations | ||
| - With demo animations | ||
| - You can appy to any formats like images, header , paragraph, text, tables, buttons, and etc. | ||
@@ -82,6 +83,6 @@ Minor Changes: | ||
| name of animations | default syntax | syntax with time duration | animation effect | ||
| Motion Type | 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 | ||
| `data-motionrack` | data-motionrack="motionUp" | data-motionrack="motionUp 5s" | 5 seconds scrolling | ||
| `data-motionrack-once` | data-motionrack-once="motionUp" | data-motionrack-once="motionUp 5s" | 5 seconds one time animation | ||
@@ -171,3 +172,3 @@ ---- | ||
| <div> | ||
| <div className="btn btn-primary" data-motion-hold="expand 0.4s"> | ||
| <div className="btn btn-primary" data-motionrack-once="expand 0.4s"> | ||
| expand | ||
@@ -193,3 +194,3 @@ </div> | ||
| <div> | ||
| <div className="bg-blue-500 text-white px-4 py-2" data-motion-release="expand 4s"> | ||
| <div className="bg-blue-500 text-white px-4 py-2" data-motionrack="expand 4s"> | ||
| expand | ||
@@ -215,3 +216,3 @@ </div> | ||
| <div> | ||
| <div className="box has-background-primary has-text-white p-4" data-motion-release="expand"> | ||
| <div className="box has-background-primary has-text-white p-4" data-motionrack="expand"> | ||
| expand | ||
@@ -229,3 +230,3 @@ </div> | ||
| <div> | ||
| <div class="btn btn-primary" data-motion-hold="expand 1.4s"> | ||
| <div class="btn btn-primary" data-motionrack-once="expand 1.4s"> | ||
| expand | ||
@@ -262,3 +263,3 @@ </div> | ||
| <div> | ||
| <div class="btn btn-primary" data-motion-hold="expand 1.4s"> | ||
| <div class="btn btn-primary" data-motionrack-once="expand 1.4s"> | ||
| expand | ||
@@ -280,3 +281,3 @@ </div> | ||
| <div> | ||
| <div class="btn btn-primary" data-motion-hold="expand 1.4s"> | ||
| <div class="btn btn-primary" data-motionrack-once="expand 1.4s"> | ||
| expand | ||
@@ -319,3 +320,3 @@ </div> | ||
| <div className="monoPad"> | ||
| <div className="monoBox" data-motion-hold="expand 0.9s" style={{backgroundColor: 'gray'}}> | ||
| <div className="monoBox" data-motionrack-once="expand 0.9s" style={{backgroundColor: 'gray'}}> | ||
| expand | ||
@@ -325,6 +326,6 @@ </div> | ||
| <div className="duoPad"> | ||
| <div className="duoBox" data-motion-release="motionLeft" style={{backgroundColor: 'gray'}}> | ||
| <div className="duoBox" data-motionrack="motionLeft" style={{backgroundColor: 'gray'}}> | ||
| motionLeft | ||
| </div> | ||
| <div className="duoBox" data-motion-hold="motionRight" style={{backgroundColor: 'gray'}}> | ||
| <div className="duoBox" data-motionrack-once="motionRight" style={{backgroundColor: 'gray'}}> | ||
| motionRight | ||
@@ -334,10 +335,10 @@ </div> | ||
| <div className="monoPad"> | ||
| <div className="monoBox" data-motion-release="motionDown" style={{backgroundColor: 'gray'}}> | ||
| <div className="monoBox" data-motionrack="motionDown" style={{backgroundColor: 'gray'}}> | ||
| motionDown</div> | ||
| </div> | ||
| <div className="duoPad"> | ||
| <div className="duoBox" data-motion-release="flipUp" style={{backgroundColor: 'gray'}}> | ||
| <div className="duoBox" data-motionrack="flipUp" style={{backgroundColor: 'gray'}}> | ||
| flipUp | ||
| </div> | ||
| <div className="duoBox" data-motion-release="flipDown" style={{backgroundColor: 'gray'}}> | ||
| <div className="duoBox" data-motionrack="flipDown" style={{backgroundColor: 'gray'}}> | ||
| flipDown</div> | ||
@@ -347,8 +348,8 @@ </div> | ||
| <div className="trioBox" data-motion-release="flipLeft" style={{backgroundColor: 'gray'}}> | ||
| <div className="trioBox" data-motionrack="flipLeft" style={{backgroundColor: 'gray'}}> | ||
| flipLeft | ||
| </div> | ||
| <div className="trioBox" data-motion-release="fadeIn" style={{backgroundColor: 'gray'}}> | ||
| <div className="trioBox" data-motionrack="fadeIn" style={{backgroundColor: 'gray'}}> | ||
| fadeIn</div> | ||
| <div className="trioBox" data-motion-release="flipRight" style={{backgroundColor: 'gray'}}> | ||
| <div className="trioBox" data-motionrack="flipRight" style={{backgroundColor: 'gray'}}> | ||
| flipRight</div> | ||
@@ -355,0 +356,0 @@ </div> |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.24%
33454
- Number of lines in readme file
- increased by0.28%
361
No dependency changes