Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexcambose/motus
Animation library that mimics CSS keyframes when scrolling.
https://github.com/alexcambose/motus
animation css css-animations dom javascript keyframes parallax scroll typescript viewport
Last synced: about 2 months ago
JSON representation
Animation library that mimics CSS keyframes when scrolling.
- Host: GitHub
- URL: https://github.com/alexcambose/motus
- Owner: alexcambose
- License: mit
- Created: 2018-05-22T18:42:59.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-06-08T14:09:46.000Z (about 1 year ago)
- Last Synced: 2024-03-22T08:48:48.310Z (3 months ago)
- Topics: animation, css, css-animations, dom, javascript, keyframes, parallax, scroll, typescript, viewport
- Language: JavaScript
- Homepage: https://alexcambose.github.io/motus/
- Size: 2.39 MB
- Stars: 633
- Watchers: 10
- Forks: 39
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-list - motus
- awesome-web-animation - Motus - Animation library that mimics CSS keyframes when scrolling. (Animate on scroll)
- awesome-stars - motus
- awesome-stars - motus
- awesome-useful-frontend-things - Motus
README
# Why Motus ?
Motus allows developers to create beatuful animations that simulate CSS keyframes and are applied when the user scrolls.
## Features
- Node & Browser Support
- Simple and intuitive api
- Scroll hooks
- Both vertical and horizontal scrolling
# Getting started
Check out the [Quick Start](https://alexcambose.github.io/motus/) documentation to get started.
[Live demo](https://codesandbox.io/s/ol4v495l8z)
[Parallax demo](https://alexcambose.github.io/motus/parallax-demo)
# Usage
```js
let newAnimation = new Motus.Animation({
$el: document.getElementById('element'),
keyframes: [
{width: 100},
{width: 300}
]
});
Motus.addAnimation(newAnimation);
```
# Contributing
- Fork it
- Create your feature branch
- *Do something awesome*
- Commit what you have done `git commit -am 'Some changes'`
- Push to the branch `git push origin my-new-feature`
- Submit a pull request
For further information about the project please see the [development section](https://alexcambose.github.io/motus/#/development) from the documentation.
# Credits
Motus is created and maintained by Alexandru Cambose *(alexcambose)*
*I'm open to suggestions. Feel free to message me or open an issue. Pull requests are also welcome!*
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/motus/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/motus/contribute)]
# License
Motus is made available under the [MIT License](LICENSE).