Reveal Animation, Elementor, GSAP

How to create Image Reveal Animation using GSAP in Elementor

SHARE

GSAP Imgae reveal elementor Scrolltrigger

1. Image Reveal Animation on Pageload

CSS Code:

.rectangle-reveal {
  overflow: hidden;
  clip-path: inset(40% round 2rem);
}

GSAP Code:

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const rectangleReveal = document.querySelector(".rectangle-reveal");
    const heading = document.querySelector(".headline");

    if (rectangleReveal && heading) {
      const tl = gsap.timeline();

      // Rectangle animation
      tl.to(rectangleReveal, {
        clipPath: "inset(0%)", // Reveal the rectangle with a clip-path
        duration: 3, // Duration of the rectangle animation
        ease: "power2.out", // Smooth easing for the animation
      })
        .to(rectangleReveal, {
          borderRadius: "1rem", // Add rounded corners to the rectangle
          duration: 1.5, // Duration for the border radius animation
          ease: "power1.inOut", // Smooth easing for transition
        })
        .to(rectangleReveal, {
          borderRadius: "0rem", // Reset the border radius to square
          duration: 0.5, // Duration for the reset animation
          ease: "power1.in", // Faster easing for a snappier finish
        }, "-=0.5"); // Overlaps the previous animation by 0.5 seconds

      // Heading animation (starts simultaneously with the rectangle animation)
      tl.fromTo(heading, {
        scale: 0.5, // Starting value: smaller size
        opacity: 0, // Starting value: fully transparent
      }, {
        scale: 2, // Target value: larger size
        opacity: 1, // Target value: fully visible
        duration: 3, // Same duration as the rectangle animation
        ease: "power2.out", // Smooth easing for the animation
      }, 0); // Starts immediately at the beginning of the timeline
    } else {
      console.error("A required element was not found."); // Log an error if an element is missing
    }
  });
</script>

2. Circle Reveal Image Animation

CSS Code:

.circle-reveal {
  overflow: hidden;
  clip-path: circle(5% at 50% 50%); /* Startgröße */
}

GSAP Code:

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    gsap.registerPlugin(ScrollTrigger);

    const circleReveal = document.querySelector(".circle-reveal");

    if (circleReveal) {
      // ScrollTrigger for the animation
      const circleAnimation = gsap.to(".circle-reveal", {
        clipPath: "circle(90% at 50% 50%)", // Target value for the clip-path
        ease: "none", // No easing applied for a linear effect
        scrollTrigger: {
          trigger: ".circle-reveal", // Element that triggers the animation
          start: "center bottom", // Start the animation when the element's center hits the bottom of the viewport
          end: "top 10%", // End the animation when the element's top reaches 10% of the viewport
          scrub: true, // Smoothly scrub the animation based on scroll position
          markers: true, // Display markers to visualize start and end points
          invalidateOnRefresh: true, // Recalculate values when the page is refreshed
          onRefresh: () => {
            // Ensure the starting value is reset on each refresh
            gsap.set(".circle-reveal", { clipPath: "circle(5% at 50% 50%)" });
          },
        },
      });

      // Recalculate ScrollTrigger settings when the window is resized
      window.addEventListener("resize", () => {
        ScrollTrigger.refresh();
      });
    } else {
      console.error("The element with the class .circle-reveal was not found.");
    }
  });
</script>

GDPR Cookie Consent with Real Cookie Banner