MHM Animations - Complete Reference

MHM Animations v2.2.0

Complete GSAP animation library for MHM Services. 55 professional scroll-triggered animations using simple CSS classes. Works seamlessly with Elementor and the MHM Web Brand Kit.

⚠️ Plugin Dependency: This reference page requires the MHM Animations and MHM Web Brand Kit plugins to be active. Without them, animations and styling will not display correctly.

Basic Animations

Essential entrance animations for any element. These are your go-to animations for most content.

`mhm-fade-up`

Fade in while moving up from below

Fade Up

`mhm-fade-down`

Fade in while moving down from above

Fade Down

`mhm-fade-left`

Fade in while moving from the left

Fade Left

`mhm-fade-right`

Fade in while moving from the right

Fade Right

`mhm-fade-in`

Simple opacity fade (no movement)

Fade In

`mhm-scale-in`

Scale up from 92% to 100%

Scale In

`mhm-scale-up`

Scale up with fade and vertical movement

Scale Up

`mhm-blur-in`

Blur to sharp focus transition

Blur In

`mhm-rotate-in`

Rotate while fading in

Rotate In

`mhm-flip-in`

3D flip entrance effect

Flip In

Stagger Animations

Apply these to parent containers to animate child elements in sequence.

`mhm-stagger-children`

Staggers all direct children

Child 1

Child 2

Child 3

`mhm-stagger-fade`

Children fade in with stagger

Item 1

Item 2

Item 3

`mhm-stagger-scale`

Children scale in with stagger

Text Animations

Advanced text effects that animate individual characters, words, or lines. Requires SplitText plugin to be enabled.

`mhm-text-reveal`

Reveal text from behind a mask

Revealed Text

`mhm-text-chars`

Animate each character individually

Character

`mhm-text-words`

Animate each word individually

Word By Word

`mhm-text-lines`

Animate each line individually

Line
By
Line

`mhm-text-scramble`

Scramble to final text (ScrambleText plugin)

Scramble

`mhm-typewriter`

Typewriter effect (TextPlugin)

Typewriter

SVG Animations

Stroke drawing effects for SVG paths. Requires DrawSVG plugin to be enabled.

📝 Note: These animations require actual SVG elements with paths. Apply these classes directly to <svg> elements or containers with SVG inside.

`mhm-draw-line`

Draw SVG stroke from start to end

`mhm-draw-reverse`

Draw SVG stroke from end to start

`mhm-draw-center`

Draw SVG stroke from center outward

Scroll Effects

Advanced scroll-linked animations including parallax and pinning.

📜 Scroll-Based Animations: These animations are tied to scroll position and work best on full-page layouts. They require scrolling to see the full effect and aren't suitable for replay buttons. Test them in your actual page layouts.

`mhm-parallax-slow`

Slow parallax scroll effect (0.3x speed)

`mhm-parallax-medium`

Medium parallax scroll (0.5x speed)

`mhm-parallax-fast`

Fast parallax scroll (0.7x speed)

`mhm-pin`

Pin element during scroll

`mhm-scrub`

Link animation to scroll position

Image Animations

Professional image reveal effects and transitions.

`mhm-image-glide`

Image glides into view

`mhm-image-reveal`

Image reveals from behind mask

`mhm-image-zoom`

Image zooms in on scroll

`mhm-image-curtain`

Curtain reveal effect

Interactive Animations

Hover effects and interactive elements.

`mhm-hover-lift`

Lift up on hover

Hover Me

`mhm-hover-grow`

Grow on hover

Hover Me

`mhm-hover-glow`

Glow effect on hover

Hover Me

`mhm-magnetic`

Magnetic cursor effect (Draggable plugin)

Magnetic

Special Effects

Unique animations for attention-grabbing elements.

`mhm-counter`

Animated number counter (use data-mhm-count-to="100")

`mhm-progress`

Animated progress bar fill

Progress

`mhm-bounce`

Continuous bounce effect

Bounce

`mhm-shake`

Shake for attention

Shake

`mhm-pulse`

Continuous pulse effect

Pulse

Ken Burns Effects

Cinematic zoom and pan effects for images (apply to <img> elements).

🎬 Image Required: Ken Burns effects must be applied directly to <img> elements. They create slow, cinematic zoom and pan movements perfect for hero sections and portfolios.

`mhm-kenburns`

Classic Ken Burns zoom + pan

`mhm-kenburns-top`

Zoom toward top

`mhm-kenburns-bottom`

Zoom toward bottom

`mhm-kenburns-left`

Zoom toward left

`mhm-kenburns-right`

Zoom toward right

`mhm-kenburns-top-left`

Zoom toward top-left corner

`mhm-kenburns-top-right`

Zoom toward top-right corner

`mhm-kenburns-bottom-left`

Zoom toward bottom-left corner

`mhm-kenburns-bottom-right`

Zoom toward bottom-right corner

Background Pan Effects

Animated background position shifts for background images.

🖼️ Background Image Required: These effects animate the background-position property. Apply to elements with background-image set. Works beautifully on hero sections and full-width containers.

`mhm-bg-pan-left`

Pan background to the left

`mhm-bg-pan-right`

Pan background to the right

`mhm-bg-pan-top`

Pan background upward

`mhm-bg-pan-bottom`

Pan background downward

`mhm-bg-pan-horizontal`

Horizontal pan left to right

`mhm-bg-pan-vertical`

Vertical pan top to bottom

`mhm-bg-pan-diagonal`

Diagonal pan effect

Color Effects

Dynamic color and gradient animations.

🎨 Scroll-Linked Color: These effects animate colors based on scroll position. Best used on full-page sections where the color transition corresponds to content changes.

`mhm-color-change`

Animate between colors on scroll

`mhm-gradient-shift`

Shift gradient position

Customization Attributes

Fine-tune any animation using data attributes.

Attribute	Purpose	Values	Example
`data-mhm-trigger`	When to trigger animation	scroll, load	`data-mhm-trigger="load"`
💡 Important: By default, animations trigger on scroll-in. Use `data-mhm-trigger="load"` to make animations play immediately on page load. All demos on this reference page use "load" trigger so you can see them without scrolling.
`data-mhm-delay`	Delay before animation starts (seconds)	0.1, 0.2, 0.5, etc.	`data-mhm-delay="0.3"`
`data-mhm-duration`	Animation duration (seconds)	0.5, 1, 1.5, etc.	`data-mhm-duration="1.2"`
`data-mhm-distance`	Movement distance (pixels)	30, 50, 100, etc.	`data-mhm-distance="80"`
`data-mhm-once`	Animate only once?	true, false	`data-mhm-once="true"`
`data-mhm-stagger`	Stagger delay between children (seconds)	0.05, 0.1, 0.2, etc.	`data-mhm-stagger="0.15"`
`data-mhm-start`	ScrollTrigger start position	top 80%, center, etc.	`data-mhm-start="top 90%"`
`data-mhm-ease`	GSAP easing function	power2.out, elastic, bounce	`data-mhm-ease="elastic"`
`data-mhm-count-to`	Target number for counter	Any number	`data-mhm-count-to="5000"`
`data-mhm-markers`	Show ScrollTrigger debug markers	true, false	`data-mhm-markers="true"`

Usage Examples

Basic HTML (Scroll-Triggered - Default)

<div class="mhm-fade-up">
    This will fade up when scrolled into view
</div>

Trigger on Page Load

<div class="mhm-fade-up" data-mhm-trigger="load">
    This will fade up immediately when page loads
</div>

With Custom Timing

<div class="mhm-scale-in" 
     data-mhm-trigger="load" 
     data-mhm-duration="1.5" 
     data-mhm-delay="0.3">
    Slow scale in with delay on page load
</div>

Staggered Children

<div class="mhm-stagger-fade" 
     data-mhm-trigger="load" 
     data-mhm-stagger="0.2">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Elementor Integration

Select any widget or section
Go to Advanced → CSS Classes
Add class: mhm-fade-up
Optionally add attributes in Advanced → Attributes