Reveal Animation, Elementor, GSAP
Wie du eine GSAP Bild-Animation in Elementor erstellst - 2 Varianten
SHARE
SHARE
Visuelle Animationen können das Benutzererlebnis deiner Website erheblich aufwerten. In dieser Anleitung erfährst du, wie du mit modernen Web-Technologien in Elementor beeindruckende Bild-Enthüllungsanimationen erstellst.
Clip-Path ist eine leistungsstarke CSS-Eigenschaft, mit der du Elemente in verschiedene Formen zuschneiden kannst – beispielsweise Kreise oder Rechtecke. Ein hilfreiches Tool für die Erstellung dieser Animationen ist Clippy, mit dem du die exakten Werte für deine Animationen festlegen kannst.
Mit Clippy kannst du die Start- und Endpositionen definieren, während GSAP für die flüssige Übergangsanimation zwischen diesen Punkten sorgt.
Die Basis für diese Animationen ist eine saubere Container-Struktur in Elementor. Die wichtigsten Schritte sind:
Die Rechteck-Enthüllungsanimation erfordert präzise Container-Klassen und benutzerdefiniertes CSS. Die wesentlichen Schritte umfassen:
Der Kreis-Enthüllungseffekt bietet eine kreative Möglichkeit, Bilder animiert darzustellen:
Das GSAP-Skript ist entscheidend für die Steuerung des Animationsverhaltens. Wichtige Aspekte:
Damit die Animationen auf allen Geräten reibungslos funktionieren, solltest du:
Während diese Animationen beeindruckende Effekte bieten, ist zu beachten, dass Clip-Path-Animationen in älteren Browsern (insbesondere Internet Explorer) eingeschränkt funktionieren. Moderne Browser (Chrome, Firefox, Edge, Safari) bieten die beste Unterstützung.
Bild-Enthüllungsanimationen mit GSAP und Clip-Path sind eine fantastische Möglichkeit, die Interaktivität und Nutzerbindung einer Website zu verbessern. Mit dieser Anleitung kannst du professionelle Animationen in Elementor erstellen, die sich nahtlos in dein Design einfügen.
Tipp: Teste deine Animationen gründlich auf verschiedenen Geräten und Browsern, um eine optimale Performance und Kompatibilität sicherzustellen.
Füge diesen Code in das HTML-Widget der Seite oder in den benutzerdefinierten Code von Elementor ein.
<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>
Füge diesen Code in dein Custom CSS von WordPress, Elementor oder einem Widget auf der Seite hinzu
.rectangle-reveal {
overflow: hidden;
clip-path: inset(40% round 2rem);
}
.circle-reveal {
overflow: hidden;
clip-path: circle(5% at 50% 50%); /* Startgröße */
}
<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>
ich bin Sabine – Webdesignerin und WordPress-Expertin. Ich entwickle professionelle Websites, die technisch überzeugen und deine Business-Ziele unterstützen.
Damit du ohne Umwege zu deiner Website kommst, habe ich dir die 5 wichtigsten Tipps zusammengestellt. So sparst du wertvolle Zeit und Geld!
Besuche meinen Youtube Channel und entdecke interessante Tipps, wie du Animationen erstellst sowie weitere Tipps rund um Elementor und Webdesign.
…lies diese 5 Planungs-Tipps, die Selbständige & Coaches tausende Euro kosten
