Reveal Animation, Elementor, GSAP
How to create Image Reveal Animation using GSAP in Elementor
SHARE
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>
