Mastering GSAP Image Reveal Animations in Elementor: A Step-by-Step Guide
SHARE
Learn how to create stunning image reveal animations using Clip Path, GSAP, and CSS within Elementor to enhance your website’s visual appeal.
Creating engaging visual animations can significantly enhance your website’s user experience. This guide explores how to implement impressive image reveal animations using modern web technologies within the Elementor page builder.
Understanding Clip Path and Essential Tools:
Clip Path is a powerful CSS property that allows you to create various shapes for element clipping, including circles and squares. One invaluable tool for generating these animations is Clippy, which helps determine the precise values needed for your animations. Using Clippy, you can define both starting and ending positions for your animations, while GSAP handles the smooth transition between these points.
Setting Up the Container Structure:
The foundation of these animations begins with proper container setup in Elementor. The process involves:
– Creating a full-width container with 100VH height
– Setting overflow to hidden
– Configuring black background color
– Zeroing out margins and padding
– Centering content alignment
– Adding nested containers for image placement
Rectangle Reveal Animation:
The rectangle reveal animation requires careful attention to container classes and custom CSS implementation. Key steps include:
– Adding an image with center positioning
– Applying the “rectangleReveal” class
– Implementing custom CSS with clip path values
– Including animated headings with proper scaling and opacity effects
– Ensuring responsive design across different device sizes
Circle Reveal Animation:
The circle reveal effect offers a different approach to image presentation:
– Creating containers with specific padding (10VW)
– Setting up a 70VH height container for the image
– Applying border radius for rounded edges
– Using the “circleReveal” class
– Implementing circle-specific clip path values
– Adding GSAP scroll trigger functionality
Understanding GSAP Implementation:
The GSAP code is crucial for controlling animation behavior:
– Utilizing GSAP core and ScrollTrigger
– Setting trigger points based on container positions
– Controlling animation start and end positions
– Fine-tuning scroll-based timing
– Implementing responsive breakpoints
Responsive Considerations:
To ensure smooth functionality across all devices:
– Adjust heading sizes for different screen sizes
– Implement proper container scaling
– Maintain appropriate padding and margins
– Test animations across various viewport sizes
– Ensure content remains centered and legible
Browser Compatibility:
While these animations create impressive effects, it’s important to note that Clip Path animations have limited compatibility with older browsers, particularly Internet Explorer. Modern browsers provide the best experience for these animations.
Technical Implementation Tips:
– Use appropriate class naming conventions for proper functionality
– Implement clean, organized CSS structure
– Maintain proper container hierarchy
– Test animations thoroughly across different devices
– Adjust timing and positioning values as needed
Image reveal animations using GSAP and Clip Path provide an excellent way to enhance website interactivity and user engagement. By following these steps and understanding the technical components involved, you can create professional-looking animations that work seamlessly within your Elementor-built website. Remember to test thoroughly across different devices and modern browsers to ensure optimal performance.
1. Image Reveal Animation on Pageload
GSAP Code
Add this code to the pages HTML widget or to your Elementor custom 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>
CSS Code
.rectangle-reveal {
overflow: hidden;
clip-path: inset(40% round 2rem);
}
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>