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

Basic Usage

Just do three steps:

  1. Tag your HTML with data-murphy:
<div data-murphy="left-to-right">Any content here</div>
  1. Reset your CSS:
*[data-murphy] {
  opacity: 0;
}
  1. Start murphy.js:
import murphy from "murphyjs";
murphy.play()

That's it! 🤟🏿

Features

  • ⚡️ 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)
  • 🔄 Mirror animations for smooth scroll transitions

Documentation

Check out our Getting Started guide to learn more about murphy.js.

API Reference
murphy.js