motionrack
Advanced tools
Comparing version 1.0.0-beta.3 to 1.0.0
{ | ||
"name": "motionrack", | ||
"version": "1.0.0-beta.3", | ||
"version": "1.0.0", | ||
"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.", | ||
@@ -21,2 +21,3 @@ "main": "index.js", | ||
"css", | ||
"javascript", | ||
"react", | ||
@@ -23,0 +24,0 @@ "vue", |
@@ -10,3 +10,3 @@ <p align="center"> | ||
[](https://www.npmjs.com/package/motionrack) | ||
 | ||
 | ||
 | ||
@@ -28,4 +28,4 @@ [](https://github.com/demjhonsilver/motionrack/blob/main/LICENSE.md) | ||
- [Vue](#vue) | ||
- [Angular](#angular) | ||
- [Svelte](#svelte) | ||
- [Angular](#angular) | ||
@@ -54,3 +54,3 @@ | ||
## Release-notes | ||
Version 1.0.0-beta.3 | ||
Version 1.0.0 | ||
@@ -63,3 +63,3 @@ ------- | ||
- With demo animations | ||
- You can appy to any formats like images, header , paragraph, text, tables, buttons, and etc. | ||
- You can apply to any formats like images, headers , paragraphs, text, tables, buttons, and etc. | ||
@@ -87,3 +87,3 @@ Minor Changes: | ||
------ | -------- | -------- | -------- | | ||
`data-motionrack` | data-motionrack="motionUp" | data-motionrack="motionUp 5s" | 5 seconds scrolling | ||
`data-motionrack` | data-motionrack="motionUp" | data-motionrack="motionUp 5s" | 5 seconds scrolling repeated | ||
`data-motionrack-once` | data-motionrack-once="motionUp" | data-motionrack-once="motionUp 5s" | 5 seconds one time animation | ||
@@ -174,3 +174,3 @@ | ||
<div> | ||
<div className="btn btn-primary" data-motionrack-once="expand 0.4s"> | ||
<div className="btn btn-primary" data-motionrack="expand 0.4s"> | ||
expand | ||
@@ -230,3 +230,3 @@ </div> | ||
<div> | ||
<div class="btn btn-primary" data-motionrack-once="expand 1.4s"> | ||
<div class="btn btn-primary" data-motionrack="expand 1.4s"> | ||
expand | ||
@@ -250,22 +250,3 @@ </div> | ||
``` | ||
## Svelte | ||
```js | ||
<script> | ||
import { onMount } from "svelte"; | ||
import { motionRack } from "motionrack"; | ||
onMount(() => { | ||
motionRack(); | ||
}); | ||
</script> | ||
<div> | ||
<div class="btn btn-primary" data-motionrack-once="expand 1.4s"> | ||
expand | ||
</div> | ||
</div> | ||
``` | ||
## Angular | ||
@@ -294,5 +275,20 @@ | ||
## Svelte | ||
```js | ||
<script> | ||
import { onMount } from "svelte"; | ||
import { motionRack } from "motionrack"; | ||
onMount(() => { | ||
motionRack(); | ||
}); | ||
</script> | ||
<div> | ||
<div class="btn btn-primary" data-motionrack="expand 1.4s"> | ||
expand | ||
</div> | ||
</div> | ||
``` | ||
@@ -303,2 +299,8 @@ | ||
------------ | ||
@@ -305,0 +307,0 @@ Layouts method (optional) |
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
33463
2
363