GSAP Animationen

Das lernst du

• Bewegung kontrolliert beschreiben
• Mehrere Schritte koordinieren
• Bewegung an Bedienung koppeln
• Scroll-Verhalten sinnvoll gestalten
• Bewegung zuverlässig begrenzen
• Inhalt und Motion zusammenführen

Kursinhalt

1. Kapitel 1 Erste Animationen

   Bewegung kontrolliert beschreiben

   1. Einführung in GSAP
   2. Die gsap.to() Methode
   3. Dauer, Verzögerung und Easing
   4. Eigenschaften transformieren
   5. Fehlerbehebung bei Attributen
   6. Mini-Projekt: Begrüßungskarte

2. Kapitel 2 Timelines

   Mehrere Schritte koordinieren

   1. Einführung in gsap.timeline()
   2. Sequenzierung mit .to()
   3. Timeline-Parameter und Standardwerte
   4. Zeitmarken und Overlaps
   5. Timeline-Debugging
   6. Mini-Projekt: Sequenzierte Produktpräsentation

3. Kapitel 3 Interaktion

   Bewegung an Bedienung koppeln

   1. Einführung in Event-Listener mit GSAP
   2. Hover-Effekte mit .enter() und .leave()
   3. Steuerung von Timelines: play(), pause() und reverse()
   4. Vermeidung von Animations-Warteschlangen
   5. Fehlerbehebung bei Event-Bindungen
   6. Mini-Projekt: Interaktives Akkordeon-Menü

4. Kapitel 4 ScrollTrigger

   Scroll-Verhalten sinnvoll gestalten

   1. Einführung in ScrollTrigger
   2. Auslöser und Markierungen: trigger und start
   3. Scroll-Eigenschaften: scrub und toggleActions
   4. Prognose von Scroll-Zuständen
   5. Fehlerbehebung bei ScrollTrigger
   6. Mini-Projekt: Scrollbasierte Storytelling-Sektion

5. Kapitel 5 Robust und performant

   Bewegung zuverlässig begrenzen

   1. Performance-Optimierung mit will-change und force3D
   2. Respektierung von prefers-reduced-motion
   3. Speicherbereinigung und gsap.killTweensOf()
   4. Prognose von Layout-Thrashing
   5. Fehlerbehebung bei Memory Leaks und überlappenden Triggern
   6. Mini-Projekt: Performantes und barrierefreies Dashboard

6. Kapitel 6 Landingpage-Projekt

   Inhalt und Motion zusammenführen

   1. Strukturierung der Landingpage
   2. Hero-Section mit Timeline
   3. Scrollbasierte Feature-Boxen
   4. Prognose des Gesamtverhaltens
   5. Fehlerbehebung im integrierten Projekt
   6. Mini-Projekt: Zugängliche GSAP-Landingpage

So funktioniert jede Lektion

Keine stundenlangen Videos. Jede Lektion ist eine kurze Runde, die du selbst machst, bis die Idee sitzt.

1. Lesen

   Eine kurze Erklärung und eine klare Aufgabe. Gerade genug, um loszulegen.

2. Schreiben

   Du tippst den Code selbst, in einem echten Editor direkt im Browser.

3. Ausführen

   Führ ihn aus und sieh sofort, was dein Programm wirklich tut.

4. Prüfen

   Prüfen sagt dir, ob die Aufgabe gelöst ist, und was noch fehlt, falls nicht.

Gut zu wissen

• Keine Installation: Editor, Ausgabe und Prüfung laufen in deinem Browser-Tab.
• Ohne Konto als Gast starten; dein Fortschritt bleibt auf diesem Gerät.
• Ein kostenloses Ostrae-Konto synchronisiert Fortschritt und Einstellungen und schaltet den Coach MICA frei.

Weitere Kurse

• C# Grundlagen
• HTML: Websites strukturieren
• CSS: Websites gestalten
• JavaScript
• Python Grundlagen und Automatisierung
• Git, GitHub und Hosting
• Design für Entwickler