Wie du eine GSAP Bild-Animation in Elementor erstellst - 2 Varianten
SHARE
Lerne, wie du beeindruckende Bild-Animationen mit Clip-Path, GSAP und CSS in Elementor erstellst, um die visuelle Wirkung deiner Website zu verbessern.
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 verstehen & wichtige Tools nutzen
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.
Struktur des Containers in Elementor einrichten
Die Basis für diese Animationen ist eine saubere Container-Struktur in Elementor. Die wichtigsten Schritte sind:
- Einen Full-Width-Container mit 100VH Höhe erstellen
- Overflow auf „hidden“ setzen
- Schwarzen Hintergrund für Kontrast verwenden
- Abstände (Margin & Padding) auf 0 setzen
- Inhalte mittig ausrichten
- Verschachtelte Container für die Bildplatzierung hinzufügen
Rechteck-Enthüllungsanimation
Die Rechteck-Enthüllungsanimation erfordert präzise Container-Klassen und benutzerdefiniertes CSS. Die wesentlichen Schritte umfassen:
- Ein Bild mit zentrierter Positionierung hinzufügen
- Die Klasse „rectangleReveal“ anwenden
- Clip-Path-Werte mit CSS definieren
- Animierte Überschriften mit Skalierungs- und Opazitätseffekten einfügen
- Responsives Design sicherstellen, damit die Animation auf allen Geräten gut aussieht
Kreis-Enthüllungsanimation
Der Kreis-Enthüllungseffekt bietet eine kreative Möglichkeit, Bilder animiert darzustellen:
- Container mit 10VW Padding erstellen
- Ein 70VH hoher Container für das Bild setzen
- Border-Radius für runde Kanten anwenden
- Die Klasse „circleReveal“ hinzufügen
- Clip-Path-Werte für Kreisformen definieren
- GSAP ScrollTrigger-Funktionalität einfügen
GSAP-Integration verstehen
Das GSAP-Skript ist entscheidend für die Steuerung des Animationsverhaltens. Wichtige Aspekte:
- GSAP Core und ScrollTrigger nutzen
- Trigger-Punkte basierend auf der Container-Position setzen
- Start- und Endposition der Animation definieren
- Timing für scrollbasierte Animationen optimieren
- Breakpoints für responsives Verhalten festlegen
Responsives Verhalten berücksichtigen
Damit die Animationen auf allen Geräten reibungslos funktionieren, solltest du:
- Überschriftengrößen für verschiedene Bildschirmgrößen anpassen
- Container-Dimensionen flexibel skalieren
- Passende Abstände (Padding & Margin) definieren
- Die Animationen auf verschiedenen Viewport-Größen testen
- Sicherstellen, dass der Inhalt immer zentriert und lesbar bleibt
Browser-Kompatibilität
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.
Technische Umsetzung & Best Practices
- Eindeutige Klassennamen verwenden, um die Funktionalität sicherzustellen
- Eine saubere und gut organisierte CSS-Struktur pflegen
- Die Container-Hierarchie korrekt einhalten
- Animationen auf verschiedenen Geräten und Browsern gründlich testen
- Timing- und Positionswerte je nach Design-Anforderung anpassen
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.
1. Bild-Enthüllungsanimation beim Seitenladen
GSAP Code
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>
CSS Code
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);
}
2. Kreis-Enthüllungsanimation für Bilder
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>
