Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/demjhonsilver/movanoba
A lightweight JavaScript library for animating elements while scrolling the webpage for React, Vue, Angular, and Svelte.
https://github.com/demjhonsilver/movanoba
angular animation animations css css3 css3-animations javascript react scroll scrolling scrolling-website svelte typescript vue
Last synced: 3 days ago
JSON representation
A lightweight JavaScript library for animating elements while scrolling the webpage for React, Vue, Angular, and Svelte.
- Host: GitHub
- URL: https://github.com/demjhonsilver/movanoba
- Owner: demjhonsilver
- License: other
- Created: 2024-03-29T09:30:40.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-04-01T12:45:14.000Z (6 months ago)
- Last Synced: 2024-08-11T11:57:43.649Z (about 2 months ago)
- Topics: angular, animation, animations, css, css3, css3-animations, javascript, react, scroll, scrolling, scrolling-website, svelte, typescript, vue
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/movanoba
- Size: 18.6 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
Movanoba
--------
[](https://www.npmjs.com/package/movanoba)
[](https://github.com/demjhonsilver/movanoba/blob/main/LICENSE.md)
---------------------
## Table of Contents
- [Description](#description)
- [Release Notes](#release-notes)
- [Installation](#installation)
- [Features](#features)
- [Demo](#demo)
- [React](#react)
- [Vue](#vue)
- [Angular](#angular)
- [Svelte](#svelte)
## Description
Movanoba is a lightweight JavaScript library for animating elements while scrolling the webpage for React, Vue, Angular, and Svelte.
Frameworks / Libraries | Tested versions
------ | -------- |
 | 18 & above
 | 3 & above
 | 16 & above
 | 3 & above
-----
## Release-notes
Version 1.0.0
-------
Major Changes:
- Can set any time duration or delay for animations
- You can apply to images, headers , paragraphs, text, tables, buttons, and etc.
Minor Changes:
Patch changes:
v1.0.1
- The index.js will restore default location
## Installation
To install the movanoba, you can use the following npm command:
```bash
npm install movanoba
```
## Features
- Compatible for React, Vue, Angular and Svelte
- Supports TypeScript
You can set any number for `Time Duration`
time syntax | value | speed |
------ | -------- | ---------------
0.1s | 0.1 seconds | superfast
0.5s | 0.5 seconds | fast
1s | 1 seconds | moderate
1.1s | 1.1 seconds | default
2s | 2 seconds | delay
2.5s | 2.5 seconds | slow
-----------
---------
```html
closeUP, closeDOWN, closeLEFT, closeRIGHT
frameLEFT, frameRIGHT, wakeupLEFT, wakeupRIGHT
twistUP, twistDOWN, twistLEFT, twistRIGHT,
edgeTOPLEFT, edgeTOPRIGHT, edgeDOWNLEFT, edgeDOWNRIGHT
show, enlarge, cycleLEFT, cycleRIGHT
```
------------------
## Demo
[Demo Animations - Movanoba](https://demo-movanoba.vercel.app)
## React
-------------
Direct method:
-------------
`applicable for custom CSS, Bootstrap, Tailwind and Bulma`
-----------
- Bootstrap
```js
import { useEffect } from 'react';
import { movement } from 'movanoba';
export const ExampleComponent = () => {
useEffect(() => {
movement();
});
return (
frameRIGHT
);
};
```
or
```js
import { useEffect } from 'react';
import { movement } from 'movanoba';
const ExampleComponent = () => {
useEffect(() => {
movement();
});
return (
frameRIGHT
);
};
export default ExampleComponent
```
- Tailwind
```js
import { useEffect } from 'react';
import { movement } from 'movanoba';
export const ExampleComponent = () => {
useEffect(() => {
movement();
});
return (
frameRIGHT
);
};
```
- Bulma
```js
import { useEffect } from 'react';
import { movement } from 'movanoba';
export const ExampleComponent = () => {
useEffect(() => {
movement();
});
return (
frameRIGHT
);
};
```
## Vue
```js
frameRIGHT
import { onMounted } from 'vue';
import { movement } from 'movanoba';
export default {
setup() {
onMounted(() => {
movement();
});
},
};
```
## Angular
```ts
import { Component, OnInit } from '@angular/core';
import { movement } from 'movanoba';
@Component({
selector: 'app-example',
template: `
frameRIGHT
`,
})
export class ExampleComponent implements OnInit {
ngOnInit() {
movement();
}
}
```
## Svelte
```js
import { onMount } from "svelte";
import { movement } from "movanoba";
onMount(() => {
movement();
});
frameRIGHT
```
## License
[MIT](http://www.opensource.org/licenses/MIT)
- This library package is FREE for both commercial and personal use. ❤️
----------------------------------------------------
## Author
Demjhon Silver