Scrolltrigger Animation, GSAP, ELementor

Wie du eine gestapelte Karten-Animation beim Scrollen mit GSAP und Elementor erstellst

Eine Schritt-für-Schritt-Anleitung zur Umsetzung eines modernen Floating-Cards-Effekts

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.

Grundstruktur einrichten

Die Basis dieser Animation beginnt mit einer sauberen Container-Struktur in Elementor. Das Layout erfordert:

Obere und untere Container mit 100VH, um ausreichend Scroll-Bereich zu schaffen
Einen Hauptcontainer mit dunklem Hintergrund, um die Karten hervorzuheben
Einen Karten-Container mit vertikaler, gleichmäßiger Ausrichtung
Individuelle Karten-Container mit 70 % Breite und spezifischer Positionierung

Konfiguration des Karten-Containers

Jede Karte benötigt eine präzise Einrichtung, um den gewünschten Effekt zu erzielen:

Position: Sticky-Positionierung mit 15VH Abstand von oben
Benutzerdefiniertes CSS, um konsistente Kartenhöhen sicherzustellen
Inneres Padding, um Styling-Flexibilität zu ermöglichen
Hintergrundbilder, die den gesamten Kartenbereich abdecken
Responsives Design für mobile und Tablet-Ansichten

GSAP-Animationslogik

Der Animationseffekt wird durch mehrere zentrale GSAP-Komponenten gesteuert:

1. Rotations-Effekte

Anpassbare Drehwerte (Standard: -5 Grad)
Dynamische Parameter für verschiedene Bildschirmgrößen
Realistische „Papier-Absetz“-Bewegung

2. Skalierungs-Animation

Initiale Skalierung auf Normalgröße
Wachstum auf 1.2x beim Eintritt in den Viewport
Endgültige Skalierung auf 0.9x für einen Tiefeneffekt
Sanfte Übergänge zwischen den Skalierungsphasen

3. Helligkeitssteuerung

Progressiver Verdunkelungseffekt für gestapelte Karten
Anpassbare Helligkeitswerte
Scroll-gesteuerte Opazitätsänderungen

4. Floating-Animation

Leichte Auf- und Abbewegung mit Rotation
Anpassbare Floating-Intensität
Kontinuierliche Bewegung für die gestapelten Karten

Mobile Optimierung

Eine der großen Stärken dieser Animation ist ihre natürliche Anpassung an verschiedene Bildschirmgrößen:

Minimaler Code-Aufwand für responsive Anpassungen
Konsistente Animationsperformance auf allen Geräten
Dynamische Skalierung der Karten für optimale Darstellung auf Mobilgeräten
Weiche Übergänge auf Tablets und Smartphones

Anpassungsmöglichkeiten

Die Animation bietet zahlreiche Optionen zur Individualisierung:

Rotationseffekte für unterschiedliche visuelle Stile
Dynamische Skalierung der Karten
Anpassbare Helligkeitsstufen für den gestapelten Effekt
Variable Intensität der Floating-Animation
Flexible Container-Abstände und Padding-Werte

Vorteile der Umsetzung

Diese gestapelte Floating-Cards-Animation bietet mehrere Vorteile:

Einfache und schnelle Implementierung
Kaum gerätespezifische Anpassungen nötig
Flüssige Performance auf allen Geräten
Vielseitig einsetzbar für verschiedene Inhalte
Professionelles und modernes Erscheinungsbild

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.

GSAP-Code für mein Tutorial

Füge diesen Code in das HTML-Widget oder den benutzerdefinierten Code von Elementor ein.

Copy Code Copied Use a different Browser


<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>

CSS Code