Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/demjhonsilver/motionrack
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.
https://github.com/demjhonsilver/motionrack
angular animation css javascript motion react scroll scrolling svelte typescript vue
Last synced: 17 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/demjhonsilver/motionrack
- Owner: demjhonsilver
- License: other
- Created: 2023-10-25T11:53:09.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-02T07:22:07.000Z (about 1 year ago)
- Last Synced: 2024-10-11T10:43:48.410Z (about 1 month ago)
- Topics: angular, animation, css, javascript, motion, react, scroll, scrolling, svelte, typescript, vue
- Language: JavaScript
- Homepage: https://demo-motionrack.vercel.app
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Motionrack
--------
[](https://www.npmjs.com/package/motionrack)
[](https://github.com/demjhonsilver/motionrack/blob/main/LICENSE.md)
---------------------
## Table of Contents
- [Description](#description)
- [Release Notes](#release-notes)
- [Installation](#installation)
- [Features](#features)
- [Sample](#sample)
- [Demo](#demo)
- [React](#react)
- [Vue](#vue)
- [Angular](#angular)
- [Svelte](#svelte)
## Description
Motionrack is a free and open source JavaScript library animated web page scrolling in React, Vue, Angular, and Svelte. When elements enter the viewport, making it easy to create engaging and interactive web experiences.
Frameworks / Libraries | Tested versions
------ | -------- |
 | 18 & above
 | 3 & above
 | 16 & above
 | 3 & above
-----
## Release-notes
Version 1.0.1
-------
Major Changes:
- Two syntax tags `data-motionrack` & `data-motionrack-once`
- Can set any time duration or delay for animations
- With demo animations
- You can apply to any formats like images, headers , paragraphs, text, tables, buttons, and etc.
Minor Changes:
- zoomIn renamed into expand
Patch changes:
1.0.1
- Added 5 new animations: `pump`, `slopeUpLeft`, `slopeUpRight`, `slopeDownLeft`, and `slopeDownRight`.
1.0.0
- Add docs for speed
## Installation
To install the motionrack, you can use the following npm command:
```bash
npm install motionrack
```
## Features
- Compatible for React, Vue, Angular and Svelte
- Supports TypeScript
Motion Type | default syntax | syntax with time duration | animation effect
------ | -------- | -------- | -------- |
`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
----
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
expand, motionUp, motionDown, motionLeft, motionRight
fadeIn, flipUp, flipDown, flipLeft, flipRight
flash, bounceUp, bounceDown, minSpinLeft, minSpinRight
flare, flicker, motionBounce, maxSpinLeft, maxSpinRight
pump, slopeUpLeft, slopeUpRight, slopeDownLeft, slopeDownRight
```
------------------
Optional layouts
--------------
Class name to wrap:
`motionrack-wrap`
------
layouts | quantity | layers
------ | -------- | ------------- |
`monoPad` | monoBox | 1 |
`duoPad` | duoBox | 2 |
`trioPad` | trioBox | 3 |
## Sample
------
Sample website that used Motionrack
[energize-coffee-house](https://energize-coffee-house.vercel.app)
## Demo
[Demo Animations](https://demo-motionrack.vercel.app/)
## 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 (
expand
);
};
```
- Tailwind
```js
import { useEffect } from 'react';
import { motionRack } from 'motionrack';
export const ExampleComponent = () => {
useEffect(() => {
motionRack();
});
return (
expand
);
};
```
- Bulma
```js
import { useEffect } from 'react';
import { motionRack } from 'motionrack';
export const ExampleComponent = () => {
useEffect(() => {
motionRack();
});
return (
expand
);
};
```
## Vue
```js
expand
import { onMounted } from 'vue';
import { motionRack } from 'motionrack';
export default {
setup() {
onMounted(() => {
motionRack();
});
},
};
```
## Angular
```ts
import { Component, OnInit } from '@angular/core';
import { motionRack } from 'motionrack';
@Component({
selector: 'app-example',
template: `
expand
`,
})
export class ExampleComponent implements OnInit {
ngOnInit() {
motionRack();
}
}
```
## Svelte
```js
import { onMount } from "svelte";
import { motionRack } from "motionrack";
onMount(() => {
motionRack();
});
expand
```
------------
Layouts method (optional)
--------
```js
import { useEffect } from 'react';
import { motionRack } from 'motionrack';
export const ExampleComponent = () => {
useEffect(() => {
motionRack();
});
return (
expand
motionLeft
motionRight
motionDown
flipUp
flipDown
flipLeft
fadeIn
flipRight
);
};
```
## License
[MIT](http://www.opensource.org/licenses/MIT)
- This library package is FREE for both commercial and personal use. ❤️
----------------------------------------------------
## Author
Demjhon Silver