Animations & Transition Effects

Animation is what makes hover effects feel alive. Image Hover Effects Ultimate includes 70+ CSS animation options drawn from the popular Animate.css library, plus control over transition timing and speed. This guide explains all the animation options and how to use them effectively.

Two Types of Animation

There are two distinct animation systems in the plugin:

1. Overlay / Transition animations: How the overlay itself appears when you hover (fade in, slide in, etc.). These are built into each layout’s design.
2. Content entrance animations: How the text (title, description) animates in after the overlay appears. These are chosen from the 70+ Animate.css keyframes.

The 70+ Content Entrance Animations

These animations apply to the text content that appears on hover. They’re organized into families:

Fade Animations (Subtle & Professional)

• fadeIn: Simple fade from transparent to visible
• fadeInUp: Fades in while rising from below
• fadeInDown: Fades in while dropping from above
• fadeInLeft: Fades in from the right side
• fadeInRight: Fades in from the left side

Slide Animations (Clean & Directional)

• slideInUp: Slides up from the bottom
• slideInDown: Slides down from the top
• slideInLeft: Slides in from the right
• slideInRight: Slides in from the left

Zoom Animations (Dynamic & Energetic)

• zoomIn: Text scales up from small to full size
• zoomInUp: Zooms in while rising
• zoomInDown: Zooms in while dropping

Bounce Animations (Playful)

• bounceIn: Text bounces into view
• bounceInUp: Bounces up from below
• bounceInDown: Bounces down from above

Rotate Animations (Creative)

• rotateIn: Text spins into view
• rotateInDownLeft: Rotates in from top-left
• rotateInDownRight: Rotates in from top-right

Attention Seekers (Use Sparingly)

• bounce: Text bounces up and down
• pulse: Text pulses in and out
• shake: Text shakes left and right
• tada: Shakes and scales for emphasis
• wobble: Wobbles side to side
• heartBeat: Pulses like a heartbeat

Flip Animations

• flipInX: Text flips in along the X axis
• flipInY: Text flips in along the Y axis

Animation Duration

Control how fast or slow the entrance animation plays:

• Fast (0.3–0.5s): Snappy, energetic feel. Good for modern/tech brands.
• Medium (0.6–0.8s): Balanced, natural and comfortable for most sites.
• Slow (1.0s+): Cinematic, luxurious feel. Good for photography and lifestyle brands.

Set this in the animation settings panel as a number in seconds (e.g., 0.6).

Image Transition (Zoom on Hover)

Separate from the content animation, many layouts include an image-level transition — typically a subtle zoom of the photo itself when hovered. Options include:

• Zoom In: Image scales up slightly on hover (most common, adds depth)
• Zoom Out: Image scales down on hover (unusual, for specific designs)
• Pan / Shift: Image shifts position (creates a parallax-style feel)
• None: Image stays static, only overlay and text animate

Waypoints: Scroll-Triggered Animations

When Waypoints Support is enabled (Image Hover Ultimate → Settings), effects can animate in when they scroll into the viewport — even before a visitor hovers. This creates an engaging reveal as users scroll down the page.

To use scroll animations:

1. Enable Waypoints in Settings.
2. Select an entrance animation in your effect settings.
3. The animation fires once when the gallery section first becomes visible on scroll.

Best Animation Choices by Design Style

Design Style	Recommended Animation
Corporate / Professional	fadeIn, fadeInUp: subtle and clean
Photography / Portfolio	fadeIn, zoomIn: elegant and minimal
eCommerce / Product	slideInUp, fadeInUp: informative and clear
Creative / Agency	rotateIn, flipInX: bold and memorable
Children / Fun	bounceIn, tada, wobble: playful and lively

Common Animation Mistakes

• ❌ Animation too slow: Anything over 1 second feels sluggish. Users hover and move on quickly.
• ❌ Attention seekers on static displays: shake, bounce, and wobble are designed for attention. Don’t use them as entrance animations, they feel jarring.
• ❌ Different animations for each item: Using a different animation for every image in a gallery looks random. Pick one animation and use it consistently.
• ❌ Scroll animations without Waypoints enabled: If Waypoints isn’t enabled in settings, scroll-triggered animations won’t fire.