https://github.com/louisho5/motionscroll
JavaScript scroll animation library
https://github.com/louisho5/motionscroll
animation keyframes keyframes-like motion-scroll parallax-effects scroll-animation scroll-motion scroll-triggers
Last synced: about 1 year ago
JSON representation
JavaScript scroll animation library
- Host: GitHub
- URL: https://github.com/louisho5/motionscroll
- Owner: louisho5
- License: mit
- Created: 2023-12-29T07:09:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-12T16:02:40.000Z (over 2 years ago)
- Last Synced: 2024-02-12T17:27:59.150Z (over 2 years ago)
- Topics: animation, keyframes, keyframes-like, motion-scroll, parallax-effects, scroll-animation, scroll-motion, scroll-triggers
- Language: JavaScript
- Homepage: https://louisho5.github.io/MotionScroll/example/
- Size: 1.82 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MotionScroll JS
Congrats! You can now create scroll animations with CSS keyframes easily.
Version 0.1.0
# Examples
[View on demo](https://louisho5.github.io/MotionScroll/example/)
## Summary
Create scroll animations easily with just a single line of code by using motionscroll.js.
- [x] Keyframes-like animation
- [x] Customize everything with CSS only knowledge
- [x] Multiple layers support
- [x] Super lightweight, only 4KB
- [x] Minimal and ease to use
## Author
@louisho5
## Installation
To include the library in your code:
```js script
```
CDN:
```js script
```
## Requirements/Browsers
Works in Edge 12+, Chrome 43+, Safari 9+, Firefox 28+.
## Code Example
**index.html**:
```html
😻
new MotionScroll(".motionscroll");
```
## Parameters
There are 8 parameters in this library:
```js script
new MotionScroll({
container: ".motionscroll", // The container trigger
layer: "[data-motionscroll-to],[data-motionscroll-animate]", // The scroll animation will be applied to those layer inside the container
ease: 'linear', // CSS timing function like linear, ease, ease-in-out, cubic-bezier and etc...'
offsetTop: 0, // In "px" unit
offsetBottom: 0, // In "px" unit
reverse: true, // Reverse playing
playOnce: false, // Play only once
override: false, // Override all motionscroll styles
});
```
## Functions
There are 2 functions in this library:
```js script
var motionScroll = new MotionScroll();
/* Destroy */
motionScroll.destroy();
/* Initialize */
motionScroll.init();
```
## Plans
- [ ] Publish library to npm
## License
This library is under the MIT license.