GSAP jetzt völlig kostenlos: So beendest du Scroll-Pinning per Bedingung
Hey Leute, habt ihr’s schon mitbekommen? Die legendäre Animation Library GSAP (GreenSock Animation Platform) ist jetzt komplett kostenlos geworden – kein Abo, einfach frei nutzen! 🎉
Grund genug, direkt ein paar coole Tricks auszuprobieren. In diesem Beitrag zeige ich dir, wie du ein gepinntes Section-Element beim Scrollen programmgesteuert lösen kannst – ganz ohne aufwändige Höhen- oder Content-Berechnungen.
Warum bedingtes Scroll-Ende?
Normalerweise definierst du bei ScrollTrigger über start und end, wie lange ein Bereich festgepinnt bleibt. Was aber, wenn du stattdessen erst nach Erreichen einer beliebigen Bedingung wieder normal weiterscrollen möchtest?
Zum Beispiel:
- Nach 50 % Scroll-Fortschritt
- Sobald ein bestimmtes Element in der Timeline „landet“
- Sobald eine Animation durchgelaufen ist
- Oder simpel: wenn self.progress > 0.5
Das Setup
Einfaches HTML-Gerüst
<section class="panel" id="conditional-panel">
<h2>Scrollen bis Bedingung erfüllt</h2>
<div class="status">Fortschritt: 0%</div></section>
<div class="normal-content">
<h2>Weiter scrollbarer Inhalt</h2>
<p>Sobald 50% Scroll-Fortschritt erreicht sind, löst das Panel auf.</p>
</div>
CSS für den „Pin”-Effekt
.panel {
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #ffe4e1;
text-align: center;
}
.status {
font-size: 2rem;
margin-top: 1rem;
}
GSAP & ScrollTrigger einbinden
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
Der JavaScript-Kern
gsap.registerPlugin(ScrollTrigger);
const st = ScrollTrigger.create(
{
trigger: "#conditional-panel",
start: "top top",
end: "+=2000", // großer Puffer (2000px)
scrub: true,
pin: true,
markers: true,
onUpdate(self)
{
// Prozent-Fortschritt auslesen
const pct = Math.round(self.progress * 100);
document.querySelector(".status").textContent = `Fortschritt: ${pct}%`;
// Bedingung: ab 50% Pin lösen
if (self.progress >= 0.5) { document.querySelector(".status").textContent = "Bedingung erfüllt – Pin löst!";
self.kill();
// entfernt Pin & Scrub
ScrollTrigger.refresh();
// berechnet Layout neu
}
}
}
);
Was passiert hier?
Großer End-Puffer: Durch end: “+=2000” verhinderst du, dass das Panel vorzeitig endet.onUpdate(self) feuert bei jedem Scroll-Frame und liefert dir self.progress (0 → 1).
Programmatisches Ende: Sobald progress ≥ 0.5 (also 50 % durch), rufst du self.kill() auf.
Damit wird das Pinnen sofort aufgehoben – und das war’s.
Mit GSAP und ScrollTrigger kannst du Scroll-Pinning jetzt nicht nur über fixe Werte oder Content-Höhen steuern, sondern jederzeit per Code – ideal für interaktive Scrollytelling-Stories, spielerische Counters oder Zustand-abhängige Effekte. Und das Beste: GSAP ist seit Kurzem komplett kostenlos! Perfekt, um deine Projekte pimpen zu lassen, ohne einen Cent auszugeben. 😉
Als erster einen Kommentar schreiben.
Schreibe einen Kommentar