MHM Animations — Complete Demo
data-mhm-trigger="load" MHM Animations v2.0

Complete Animation Reference

Every animation in the library, with class names and attributes visible. Scroll to explore each effect.

↓ Scroll to see animations
Basic Animations

Fade & Direction

mhm-fade-up

Rises into view

mhm-fade-down

Falls into view

mhm-fade-left

Slides from right

mhm-fade-right

Slides from left

Transform Animations

Scale, Blur & Rotate

mhm-fade-in

Simple fade

mhm-scale-in

Grows in

mhm-scale-up

From tiny

mhm-blur-in

Ethereal

mhm-rotate-in

Rotates in

mhm-flip-in

3D flip

mhm-bounce

Bouncy entrance

data-mhm-distance="100"

Custom distance

Container Animations

Stagger Children

Apply to a parent element — children animate in sequence.

mhm-stagger-children
Item 1
Item 2
Item 3
mhm-stagger-fade
Item 1
Item 2
Item 3
mhm-stagger-scale
Item 1
Item 2
Item 3
data-mhm-stagger="0.2"

Control timing with the stagger attribute

Text Animations (Requires SplitText)

Typography in Motion

mhm-text-reveal

Lines Unveil with Elegance

mhm-text-words

Each word animates independently creating a flowing entrance

mhm-text-chars

Character Animation

mhm-text-lines

Line by line with blur.
Perfect for longer text.
Creates reading rhythm.

mhm-text-scramble

DECODING MESSAGE

mhm-typewriter

Typewriter effect for dynamic text...

Image Effects

Visual Reveals

mhm-image-glide
Glide Effect
mhm-image-reveal
Clip Reveal
mhm-image-zoom
Zoom In
mhm-image-curtain
Curtain Wipe
data-mhm-direction="right"

Control reveal direction: up, down, left, right

SVG Animations (Uses DrawSVG if available)

Line Drawing

mhm-draw-line

Standard draw

mhm-draw-reverse

Reverse draw

mhm-draw-center

From center

Scroll Effects

Parallax & Scrub

These decorative elements move at different speeds as you scroll.

mhm-parallax-slow
mhm-parallax-medium
mhm-parallax-fast
Hover Effects

Interactive Elements

Hover over these elements to see the effect.

mhm-hover-lift

3D Tilt

Follows cursor

mhm-hover-grow

Scale Up

Simple enlarge

mhm-hover-glow

Glow

Soft light

mhm-magnetic Magnetic
Special Effects

Counters, Progress & More

mhm-counter data-mhm-count-to="250"
0

Projects Completed

mhm-counter data-mhm-count-to="25" data-mhm-decimals="1"
0

Years Experience

mhm-counter data-mhm-count-to="100"
0

Happy Clients

mhm-progress data-mhm-value="85"

Project Progress

mhm-progress data-mhm-value="60"

Budget Used

mhm-shake

Attention grabber

mhm-pulse

Continuous pulse

mhm-bounce

Bouncy entrance

Data Attributes

Customisation Options

Override defaults on any element

data-mhm-trigger

scroll | load

data-mhm-once

true | false

data-mhm-delay

Seconds (0.5)

data-mhm-duration

Seconds (0.8)

data-mhm-distance

Pixels (50)

data-mhm-stagger

Seconds (0.12)

data-mhm-scale

0.9, 1.1, etc

data-mhm-ease

power3.out, elastic

data-mhm-scrub

true | 0.5 | 1

Ready?

Start Animating Your Site

Add any class to your Elementor widgets or HTML elements.

MHM Animations v2.0.0 — Created for MHM Services