Showcase 💅🏽

Here are some examples of murphy.js in action. Each example demonstrates different animation configurations and use cases.

Examples

Basic Animations

Bottom to Top

Top to Bottom

Left to Right

Right to Left

Class-based Animations

You can also create animations programmatically using the Murphy class:

// Create a new instance
const murphy = new Murphy();
 
// Fade in and slide up
murphy.animate('.fade-in', {
  opacity: [0, 1],
  y: [20, 0],
  duration: 1000
});
 
// Slide in from left
murphy.animate('.slide-in', {
  x: [-100, 0],
  duration: 800,
  ease: 'ease-out'
});
 
// Complex animation
murphy.animate('.complex', {
  opacity: [0, 1],
  x: [-50, 0],
  y: [30, 0],
  duration: 1200,
  delay: 200,
  ease: 'cubic-bezier(0.4, 0, 0.2, 1)'
});

Fired on animate() execution. In this case, when page loads:

Fade In + Slide Up

Slide In from Left

Complex Animation

Standard Easing Functions

Ease (Default)

Linear

Ease In

Ease Out

Ease In Out

Material Design Easing

Material Standard

Material Decelerate

Material Accelerate

Custom Easing Functions

Bounce

Elastic

Smooth

Sharp

Swift

Spring

Custom Duration and Delay

500ms Duration

200ms Delay

800ms + Bounce

Custom Distance

50px Distance

100px Distance

150px + Elastic

Combined Examples

Bounce + 1s

Elastic + 80px

Spring + 300ms Delay

Sequential Animations

This example shows how to create sequential animations, like the murphy.js logo:

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

murphy.js

Group-based Animations

You can group elements using the data-murphy-group attribute. This allows you to control animations for specific groups of elements.

Group 1

Group 2

Custom Configuration

You can customize each animation with different attributes:

<!-- Custom distance -->
<div data-murphy="bottom-to-top" data-murphy-element-distance="100">
  Moves 100px during animation
</div>
 
<!-- Custom duration -->
<div data-murphy="left-to-right" data-murphy-animation-duration="1000">
  Takes 1 second to animate
</div>
 
<!-- Custom easing -->
<div data-murphy="top-to-bottom" data-murphy-ease="cubic-bezier(0.4, 0, 0.2, 1)">
  Custom easing function
</div>
 
<!-- Custom threshold -->
<div data-murphy="right-to-left" data-murphy-element-threshold="0.5">
  Triggers when 50% visible
</div>

Moves 100px during animation

Takes 1 second to animate

Custom easing function. Ex: cubic-bezier(0.4, 0, 0.2, 1)

Triggers when 50% visible

Easing Functions

Try different easing functions to change how your animations feel:

<!-- Basic easings -->
<div data-murphy="bottom-to-top" data-murphy-ease="ease-in">Ease In</div>
<div data-murphy="bottom-to-top" data-murphy-ease="ease-out">Ease Out</div>
<div data-murphy="bottom-to-top" data-murphy-ease="ease-in-out">Ease In Out</div>
 
<!-- Cubic easings -->
<div data-murphy="bottom-to-top" data-murphy-ease="cubic-in">Cubic In</div>
<div data-murphy="bottom-to-top" data-murphy-ease="cubic-out">Cubic Out</div>
<div data-murphy="bottom-to-top" data-murphy-ease="cubic-in-out">Cubic In Out</div>
 
<!-- Quad easings -->
<div data-murphy="bottom-to-top" data-murphy-ease="quad-in">Quad In</div>
<div data-murphy="bottom-to-top" data-murphy-ease="quad-out">Quad Out</div>
<div data-murphy="bottom-to-top" data-murphy-ease="quad-in-out">Quad In Out</div>

Ease In

Ease Out

Ease In Out

Cubic In

Cubic Out

Cubic In Out

Quad In

Quad Out

Quad In Out

Using Events for Custom Effects

You can use murphy.js events to add custom behaviors. For example, add a class when an element enters the viewport and remove it when it leaves:

document.addEventListener('murphy:in', ({ detail }) => {
  detail.element.classList.add('is-visible');
});
document.addEventListener('murphy:out', ({ detail }) => {
  detail.element.classList.remove('is-visible');
});

This allows you to trigger any effect you want based on the animation lifecycle!

Flip Animations

Flip Left

Flip Right

Flip Up

Flip Down

Zoom Animations

Zoom In

Zoom Out

Fade Animations

Fade

Fade Up

Fade Down

Fade Left

Fade Right

Rotate Animations

Rotate Left

Rotate Right

Scale Animations

Scale Up

Scale Down

Slide Animations

Slide Up

Slide Down

Slide Left

Slide Right

Bounce Animations

Bounce In

Bounce Out

Viewport Position Examples

You can control when animations trigger based on the element's position in the viewport using the data-murphy-root-margin attribute. For convenience, we provide several aliases:

<!-- Animate when element reaches middle of viewport -->
<div data-murphy="bottom-to-top" data-murphy-root-margin="middle">
  This will animate when it reaches the middle of the viewport
</div>
 
<!-- Animate when element reaches bottom of viewport -->
<div data-murphy="bottom-to-top" data-murphy-root-margin="bottom">
  This will animate when it reaches the bottom of the viewport
</div>
 
<!-- Animate when element is 25% from bottom of viewport -->
<div data-murphy="bottom-to-top" data-murphy-root-margin="quarter">
  This will animate when it's 25% from the bottom of the viewport
</div>
 
<!-- Animate when element is 75% from bottom of viewport -->
<div data-murphy="bottom-to-top" data-murphy-root-margin="three-quarters">
  This will animate when it's 75% from the bottom of the viewport
</div>

You can also use raw CSS margin values if you need more precise control:

<div data-murphy="bottom-to-top" data-murphy-root-margin="0px 0px -50% 0px">
  This will animate when it reaches the middle of the viewport
</div>

The root margin follows the CSS margin syntax: top right bottom left. Negative values create an inset margin, which means the animation will trigger when the element reaches that point in the viewport.

Available Viewport Position Aliases

Alias	Description	Raw Value
`top`	Triggers at top of viewport	`'0px 0px 0px 0px'`
`middle`	Triggers at middle of viewport	`'0px 0px -50% 0px'`
`bottom`	Triggers at bottom of viewport	`'0px 0px 0px 0px'`
`quarter`	Triggers at 25% from bottom	`'0px 0px -25% 0px'`
`three-quarters`	Triggers at 75% from bottom	`'0px 0px -75% 0px'`

Middle of viewport

Bottom of viewport

25% from bottom

75% from bottom

Mirror Animations

Mirror animations play in reverse when elements leave the viewport. This creates a smooth effect when scrolling up and down:

<div data-murphy="bottom-to-top" data-murphy-mirror="true">
  This will animate in when scrolling down and animate out when scrolling up
</div>

Bottom to Top (Mirrored)

Left to Right (Mirrored)

Fade (Mirrored)

Zoom In (Mirrored)

Mobile Optimization

You can disable animations on mobile devices to improve performance:

<!-- This element will not animate on mobile devices -->
<div data-murphy="bottom-to-top" data-murphy-disable-mobile="true">
  This animation is disabled on mobile devices
</div>
 
<!-- This element will always animate -->
<div data-murphy="bottom-to-top">
  This animation works on all devices
</div>

Disabled on Mobile

Always Animated

API Reference