Introduction

murphy.js

A JavaScript vanilla library to scroll based reveal animations. The 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. Now with a built-in event system for advanced control!

Why use

  • ⚡️ Lightweight library (only 3.7KB)
  • 🍎 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
  • 🛎️ Built-in event system for animation lifecycle (in, out, finish, cancel, reset, cleanup)

Quick Start

Installation

npm install murphyjs

Or via CDN:

<script src="https://unpkg.com/murphyjs@2.5.1/dist/index.js"></script>
<script>
  // Call play() after the script is loaded
  if (typeof window !== "undefined" && window.murphy) {
    window.murphy.play();
  }
</script>

Basic Usage

Just do three steps:

  1. Tag your HTML with data-murphy:
<div data-murphy="left-to-right">Any content here</div>
  1. (Optional) Reset your CSS to prevent initial visibility:
*[data-murphy] {
  opacity: 0;
}
  1. Start murphy.js:
API Reference
murphy.js