Einführung

? Hallo Entwickler!

Willkommen zum Tag 7 meiner GSAP-Reise, wo ich die unendlichen Möglichkeiten von Animationen im Web erkunde. Heute habe ich mich der Herausforderung gestellt, eine interaktive scrollbasierte Laufschriftanimation mit dynamischem Text und rotierenden Pfeilen zu erstellen.

Mit den leistungsstarken Animationstools von GSAP sorgen wir dafür, dass die Seite mit nahtloser Bewegung und Drehung auf die Scrollrichtung des Benutzers – nach oben oder unten – reagiert. Lass uns eintauchen!

Was wir bauen?️

Unsere Animation umfasst:

• Ein Laufrahmen aus Text und Bildern.
• Responsive Animationen, die sich basierend auf der Bildlaufrichtung anpassen.
• Rotierende Pfeile für mehr Flair!

Sie können die Live-Demo hier ansehen.

HTML-Struktur

Hier ist das einfache HTML-Markup, das ich verwendet habe:

    
    
    
    


    











  
  
  JavaScript Animation with GSAP


Here’s the GSAP-powered JavaScript code that makes the magic happen:



window.addEventListener("wheel", function (dets) { 
    if (dets.deltaY > 0) {
        // Scrolling Down
        gsap.to(".marque", {
            x: "-200%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 180
        });
    } else {
        // Scrolling Up
        gsap.to(".marque", {
            x: "0%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 0
        });
    }
});








  
  
  Wie es funktioniert ⚙️




Event Listener: Der window.addEventListener("wheel") erkennt die Scrollrichtung.


GSAP-Animationen:



gsap.to() verschiebt die Markierung in eine bestimmte Richtung.

Die Drehung der Pfeile sorgt für ein dynamisches, interaktives Gefühl.




Unendliches Scrollen: Durch die Verwendung von „repeat: -1“ wird sichergestellt, dass die Laufschrift endlos in einer Schleife läuft.







  
  
  Herausforderungen und Erkenntnisse


? Herausforderung: Die Synchronisierung der Bildlaufrichtung mit der Laufschriftbewegung war schwierig.


? Lösung: Die robuste API von GSAP machte es einfach, die Animationen mit Eigenschaften wie Wiederholung, Leichtigkeit und Dauer zu verfeinern.  





  
  
  Letzte Gedanken


Dieses Projekt zeigte, wie GSAP mit scrollbasierten Interaktionen umgehen und Webseiten zum Leben erwecken kann. Ganz gleich, ob Sie an einem persönlichen Portfolio oder einer kreativen Website arbeiten, GSAP ist das perfekte Tool, um Animationen ansprechend und intuitiv zu gestalten.  

? Probieren Sie es selbst aus und teilen Sie Ihre Kreationen! 





  
  
  Ressourcen




GSAP-Dokumentation


Live-Demo


Quellcode auf GitHub