Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cesarolvr/murphyjs-lib
A simple way to implement scroll based reveal animations in your pages: https://cesarolvr.github.io/murphyjs/index.html
https://github.com/cesarolvr/murphyjs-lib
animation css intersection-observer motion scroll-events smooth-scrolling webanimation-api
Last synced: 8 days ago
JSON representation
A simple way to implement scroll based reveal animations in your pages: https://cesarolvr.github.io/murphyjs/index.html
- Host: GitHub
- URL: https://github.com/cesarolvr/murphyjs-lib
- Owner: cesarolvr
- Created: 2019-01-09T16:58:51.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T06:42:52.000Z (over 1 year ago)
- Last Synced: 2024-10-30T00:26:51.093Z (15 days ago)
- Topics: animation, css, intersection-observer, motion, scroll-events, smooth-scrolling, webanimation-api
- Language: JavaScript
- Homepage: https://cesarolvr.github.io/murphyjs/index.html
- Size: 2.59 MB
- Stars: 80
- Watchers: 1
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A JavaScript vanilla library to scroll based reveal animations
murphy.js is a lightweight JavaScript animation library with a simple implementation way.
All this works by joining of data-attributes, Web animate API and Intersection Observer API.
Demo | Why use murphy | Getting started | Examples | Documentation | Browser support
## Why use murphy
- ⚡️ Lightweight library (only 1.7KB gzipped).
- 🍎 Easy and fast implementation.
- 🎮 Total control of IntersectionObserver parameters.
- 🎨 Full customization of time, duration, ease, delay and distance of each element individually.
- 🎁 Some animations implemented by default.
- 🏝 Plug and play solution to landing pages and simple projects.
- ❎ Native fallback to not supported browsers.
## Getting started
### Download
Via npm:
```bash
$ npm install murphyjs
```
Via file include:
Download file [here](https://raw.githubusercontent.com/cesarolvr/murphyjs/master/dist/index.js) and link in your HTML.
```html
```
### Usage
Just do three steps:
#### ⛳ Tag your HTML
In your markup, decore your element with attribute `data-murphy`.
```html
Any content here
```
The default effect of murphy is `bottom-to-top`, but it's possible use `top-to-bottom`, `left-to-right` and `right-to-left` too.
#### 🔌 Reset your CSS
In your CSS, reset all the tagged elements.
```css
*[data-murphy] {
opacity: 0;
}
```
#### 🚀 Start murphy
In Javascript side, just import and run `play` when your page is completely loaded to start monitoring decorated elements.
##### Import
```javascript
import murphy from "murphyjs";
```
##### And trigger
```javascript
murphy.play()
```
#### Or call from window
If you added murphy via **file include**, just access murphy's functions in window:
```javascript
window.murphy.play()
// or just
murphy.play()
```
#### That is enough to work! 🤟🏿
## Examples
#### 1. This `data-attributes`:
```html
Bottom to top
Top to bottom
Left to right
Right to left
```
#### Will result in that:
#### 2. To do the same effect that murphy's logo, use:
```html
m
u
r
p
h
y
.
j
s
```
#### Result:
#### 🚨 Important
> These animations are triggered when scrolling the page, but when the tagged elements are already within the bounds of the screen, everything works like appearance animations that React Transition Group already does.
So if you need animations on the first load of site, murphy is for you!
## Documentation
### Attributes
You can configure the animation of each decorated element individually. Beyond the `data-murphy` attribute, other attributes are available:
| Attribute | Value type | Default value | What controls |
| ------ | ------ | --------- | --------- |
| data-murphy | String | 'bottom-to-top' | - |
| data-murphy-appearance-distance | Int | 50 *(px)* | - |
| data-murphy-element-distance | Int | 30 *(px)* | - |
| data-murphy-ease | String | 'ease' *(can be a cubic-bezier)* | - |
| data-murphy-animation-delay | Int | 300 *(ms)* | - |
| data-murphy-element-threshold | Int | 1 | - |
| data-murphy-animation-duration | Int | 300 *(ms)* | - |
### Methods
| Method | What happens |
| ------ | --------- |
| play | Start monitoring on element in DOM tagged with `data-murphy` |
| reset | Resets all data-murphy elements to their initial state. |
## Browser support
| Chrome | Safari | IE / Edge | Firefox | Opera |
| ------ | ------ | --------- | ------- | ----- |
| 58+ | 12.1+ | Not *(yet)* supported | 55+ | 62+ |
## License
The code is available under the [MIT License](LICENSE.md).