Mask Entry Animation: Stunning Image Reveals with jQuery

This is a tiny jQuery script that adds fancy entrance animations to images using CSS clip-path masking. It helps you generates polygon-based mask transitions to reveal images with smooth, geometric animations.

This image entry animation suits hero sections, image galleries, and portfolio showcases. The mask effect creates directional reveals using polygon shapes, drawing attention to key visuals through controlled timing.

The script calculates polygon coordinates dynamically to animate the mask from a centered diamond shape to full image exposure. You can customize the animation duration, easing function, and initial mask dimensions.

How to use it:

1. Load the necessary jQuery and jQuery UI (for easing functions) libraries in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Embed the target image within a div container on your webpage.

<div class="hero-image">
  <img src="hero.webp" sizes="100vw" alt="Hero Image" loading="eager">
</div>  

3. Insert the following jQuery script into your webpage to trigger the mask animation.

• The animation starts when the document loads
• A progress value animates from 0 to 1 over 1400 milliseconds
• The animateClipPath function calculates four polygon points
• Each point's coordinates change based on the progress value
• The clip-path CSS property updates with new polygon coordinates
• jQuery UI's easeOutCubic easing creates smooth motion

$(document).ready(function() {
  $(".hero-image").css({
    display: "block"
  });
  const durationImage = 1400;
  const easing = "easeOutCubic";
  const animateClipPath = (progress) => {
    const x1 = 50 - 50 * progress + "%";
    const y1 = 25 - 25 * progress + "%";
    const x2 = 50 + 50 * progress + "%";
    const y2 = 35 * (1 - progress) + "%";
    const x3 = 50 + 50 * progress + "%";
    const y3 = 75 + 25 * progress + "%";
    const x4 = 50 - 50 * progress + "%";
    const y4 = 65 + 35 * progress + "%";
    $(".hero-image").css({
      "clip-path": `polygon(${x1} ${y1}, ${x2} ${y2}, ${x3} ${y3}, ${x4} ${y4})`
    });
  };
  $({ progress: 0 }).animate({ progress: 1 }, {
    duration: durationImage,
    easing: easing,
    step: animateClipPath
  });
});

---

This awesome jQuery plugin is developed by cpadlab. For more Advanced Usages, please check the demo page or visit the official website.