Scrolltrigger Animation, GSAP, ELementor
Wie du eine gestapelte Karten-Animation beim Scrollen mit GSAP und Elementor erstellst
SHARE
SHARE
Im Bereich des Webdesigns können ansprechende Animationen das Benutzererlebnis erheblich verbessern. Ein besonders auffälliger Effekt ist die gestapelte Floating-Cards-Animation, die die Illusion erzeugt, dass sich Karten oder Papiere sanft auf einer Oberfläche absetzen, begleitet von einer subtilen Schwebebewegung. Diese Anleitung zeigt Schritt für Schritt, wie dieser beeindruckende Effekt mit GSAP (GreenSock Animation Platform) und Elementor umgesetzt wird.
Die Basis dieser Animation beginnt mit einer sauberen Container-Struktur in Elementor. Das Layout erfordert:
Jede Karte benötigt eine präzise Einrichtung, um den gewünschten Effekt zu erzielen:
Der Animationseffekt wird durch mehrere zentrale GSAP-Komponenten gesteuert:
1. Rotations-Effekte
2. Skalierungs-Animation
3. Helligkeitssteuerung
4. Floating-Animation
Eine der großen Stärken dieser Animation ist ihre natürliche Anpassung an verschiedene Bildschirmgrößen:
Die Animation bietet zahlreiche Optionen zur Individualisierung:
Diese gestapelte Floating-Cards-Animation bietet mehrere Vorteile:
Die gestapelte Floating-Cards-Animation ist eine moderne und ansprechende Möglichkeit, Inhalte auf einer Website zu präsentieren. Ob für Portfolios, Produktpräsentationen oder allgemeine Content-Darstellungen – dieser Effekt verleiht jeder Seite eine professionelle Note und bleibt dennoch funktional auf allen Geräten.
Die Kombination aus GSAP und Elementor macht die Implementierung einfach, während umfangreiche Anpassungsmöglichkeiten es ermöglichen, den Effekt individuell auf jedes Design abzustimmen.
Der besondere Reiz dieser Animation liegt in ihrer einfachen Umsetzung bei gleichzeitig anspruchsvollem Erscheinungsbild. Durch die Nutzung des bereitgestellten Codes und der Anpassungsoptionen können Entwickler diesen Effekt schnell in ihre Projekte integrieren und dabei volle Kontrolle über das Animationsverhalten und das Design behalten.
Füge diesen Code in das HTML-Widget oder den benutzerdefinierten Code von Elementor ein.
<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>
const cardsContainer = document.querySelector('.cards');
const cards = document.querySelectorAll('.card');
cards.forEach((card, index) => {
const cardInner = card.querySelector('.card__inner');
// Check if the card is the last in the array
const isLastCard = index === cards.length - 1;
// Random rotation between -5 and +5 degrees
const rotation = gsap.utils.random(-5, 5, true);
// Set initial values for scale and filter
gsap.set(cardInner, {
scale: 1, // Set initial scale
filter: 'brightness(1)', // Set initial brightness
rotation: rotation // Initial rotation
});
// First ScrollTrigger for scaling and rotation
ScrollTrigger.create({
trigger: card,
start: 'top 100%', // Scaling starts when the card reaches the middle of the viewport
end: 'top 25%', // Scaling ends when the card reaches 25% of the viewport
scrub: 1, // Sync the animation with scrolling
onUpdate: (self) => {
const progress = self.progress;
// Scale and rotate the card
gsap.to(cardInner, {
scale: gsap.utils.interpolate(1.2, 0.9, progress), // Scale from 1.2 to 0.9
rotation: rotation, // Maintain the rotation
overwrite: false // No overwrite to avoid conflicts
});
}
});
// Second ScrollTrigger for dimming the previous card
ScrollTrigger.create({
trigger: card,
start: 'top 75%', // The new card dims the previous one when it reaches 75% of the viewport
end: 'top 50%', // Dimming ends when the top of the card reaches 50% of the viewport
scrub: 1, // Sync the dimming with scrolling
onUpdate: (self) => {
const progress = self.progress;
// Dim the previous card (if available)
if (index > 0) { // Check if there is a previous card
const previousCardInner = cards[index - 1].querySelector('.card__inner');
gsap.to(previousCardInner, {
filter: `brightness(${gsap.utils.interpolate(1, 0.5, progress)})`, // Dimming the previous card
overwrite: false // No overwrite to avoid conflicts
});
}
}
});
// Floating effect for the cards
gsap.to(cardInner, {
y: '+=20', // Slight floating upwards
repeat: -1, // Infinite loop
yoyo: true, // Move back and forth
ease: 'power1.inOut', // Smooth transitions
duration: gsap.utils.random(1, 2), // Random duration between 1 and 2 seconds
overwrite: false // No overwrite to avoid conflicts
});
});
</script>
.card {
position: sticky !important;
top: 15vh;
height: 70vh;
}
@media (max-width: 768px) {
.card {
position: sticky;
top: 15vh;
height: 70vh;
}}
@media (max-width: 480px) {
.card {
position: sticky;
top: 15vh;
height: 70vh;
}}
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
