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:

$ npm install murphyjs

Via file include:

Download file here and link in your HTML.

<script src="./murphy/index.js"></script>

Usage

Just do three steps:

⛳   Tag your HTML

In your markup, decore your element with attribute data-murphy.

<div data-murphy="left-to-right">Any content here</div>

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.

*[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

import murphy from "murphyjs";

And trigger

murphy.play()

Or call from window

If you added murphy via file include, just access murphy's functions in window:

window.murphy.play()
// or just
murphy.play()

That is enough to work! 🤟🏿

Examples

1. This data-attributes:

<p data-murphy="bottom-to-top">Bottom to top</p>
<p data-murphy="top-to-bottom">Top to bottom</p>
<p data-murphy="left-to-right">Left to right</p>
<p data-murphy="right-to-left">Right to left</p>

Will result in that:

2. To do the same effect that murphy's logo, use:

<p data-murphy="bottom-to-top">m</p>
<p data-murphy="bottom-to-top" data-murphy-animation-delay="400">u</p>
<p data-murphy="bottom-to-top" data-murphy-animation-delay="500">r</p>
<p data-murphy="bottom-to-top" data-murphy-animation-delay="600">p</p>
<p data-murphy="bottom-to-top" data-murphy-animation-delay="700">h</p>
<p data-murphy="bottom-to-top" data-murphy-animation-delay="800">y</p>
<p data-murphy="bottom-to-top" data-murphy-animation-delay="900">.</p>
<p data-murphy="bottom-to-top" data-murphy-animation-delay="1000">j</p>
<p data-murphy="bottom-to-top" data-murphy-animation-delay="1100">s</p>

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.