[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-gsap-scrolltrigger-scroll-animationen":3},{"_createdAt":4,"_id":5,"author":6,"body":7,"canonicalUrl":199,"category":200,"coverImage":201,"excerpt":208,"featured":209,"publishedAt":210,"readingTime":211,"relatedPosts":199,"seoDescription":212,"seoTitle":213,"slug":214,"tags":217,"title":223},"2026-04-14T11:16:07Z","epzDXqrM0Ug1OrZfNfKIrR","Joel Schwegmann",[8,19,28,36,44,53,63,71,79,87,95,103,111,119,127,135,143,151,159,167,175,183,191],{"_key":9,"_type":10,"children":11,"markDefs":17,"style":18},"af648bad-16c","block",[12],{"_key":13,"_type":14,"marks":15,"text":16},"90e77987-88a","span",[],"Warum GSAP ScrollTrigger?",[],"h2",{"_key":20,"_type":10,"children":21,"markDefs":26,"style":27},"8d97d94a-c25",[22],{"_key":23,"_type":14,"marks":24,"text":25},"196017ad-757",[],"Scroll-Animationen gehören zu den wirkungsvollsten Designelementen moderner Websites. GSAP (GreenSock Animation Platform) mit dem ScrollTrigger-Plugin ist der Industriestandard: Performant, browserübergreifend kompatibel und mit einer API, die auch komplexe Animationen handhabbar macht.",[],"normal",{"_key":29,"_type":10,"children":30,"markDefs":35,"style":18},"9d2aa5cb-bad",[31],{"_key":32,"_type":14,"marks":33,"text":34},"79906a5f-d28",[],"Grundlagen: Dein erstes ScrollTrigger",[],{"_key":37,"_type":10,"children":38,"markDefs":43,"style":27},"ae1e7ca4-65d",[39],{"_key":40,"_type":14,"marks":41,"text":42},"1bea94c4-af4",[],"Ein ScrollTrigger verknüpft eine GSAP-Animation mit dem Scroll-Fortschritt. Du definierst einen Trigger-Element, Start- und Endpunkte und die Animation selbst. Das Ergebnis: Elemente faden ein, sliden herein oder skalieren sich, sobald sie in den Viewport scrollen.",[],{"_key":45,"_type":10,"children":46,"markDefs":51,"style":52},"8dcf70e4-83e",[47],{"_key":48,"_type":14,"marks":49,"text":50},"c0d18707-da6",[],"Die wichtigsten Properties",[],"h3",{"_key":54,"_type":10,"children":55,"level":60,"listItem":61,"markDefs":62,"style":27},"11dc746f-070",[56],{"_key":57,"_type":14,"marks":58,"text":59},"0896fa19-a3a",[],"trigger: Das DOM-Element, das die Animation auslöst",1,"bullet",[],{"_key":64,"_type":10,"children":65,"level":60,"listItem":61,"markDefs":70,"style":27},"be90f27f-f0c",[66],{"_key":67,"_type":14,"marks":68,"text":69},"95e85d39-c32",[],"start: Wann die Animation startet (z.B. \"top 80%\" – wenn das Element 80% des Viewports erreicht)",[],{"_key":72,"_type":10,"children":73,"level":60,"listItem":61,"markDefs":78,"style":27},"7f680c72-613",[74],{"_key":75,"_type":14,"marks":76,"text":77},"af940410-59a",[],"end: Wann die Animation endet",[],{"_key":80,"_type":10,"children":81,"level":60,"listItem":61,"markDefs":86,"style":27},"21a6e3bf-802",[82],{"_key":83,"_type":14,"marks":84,"text":85},"c7d63a62-bb3",[],"scrub: Verknüpft die Animation direkt mit dem Scroll-Fortschritt",[],{"_key":88,"_type":10,"children":89,"level":60,"listItem":61,"markDefs":94,"style":27},"f9834841-63f",[90],{"_key":91,"_type":14,"marks":92,"text":93},"8fab9133-e7c",[],"once: Animation nur beim ersten Mal auslösen",[],{"_key":96,"_type":10,"children":97,"markDefs":102,"style":18},"cf49ad94-c54",[98],{"_key":99,"_type":14,"marks":100,"text":101},"46c52fe7-1b4",[],"Pattern 1: Fade-Up auf Scroll",[],{"_key":104,"_type":10,"children":105,"markDefs":110,"style":27},"396c22dd-f57",[106],{"_key":107,"_type":14,"marks":108,"text":109},"fbc6c13b-6ec",[],"Das klassische Pattern: Elemente starten unsichtbar (opacity: 0, y: 40px) und faden beim Scrollen ein. Verwende gsap.fromTo mit einem ScrollTrigger, der bei \"top 88%\" startet. Mit stagger-Property animierst du Gruppen von Elementen zeitversetzt.",[],{"_key":112,"_type":10,"children":113,"markDefs":118,"style":18},"39851883-b84",[114],{"_key":115,"_type":14,"marks":116,"text":117},"2cd6c2e7-72a",[],"Pattern 2: Parallax-Effekte",[],{"_key":120,"_type":10,"children":121,"markDefs":126,"style":27},"52d7e048-81d",[122],{"_key":123,"_type":14,"marks":124,"text":125},"30fc14bd-891",[],"Mit scrub: true verknüpfst du die Animation 1:1 mit dem Scroll. So erzeugst du Parallax-Effekte: Hintergrundbilder bewegen sich langsamer als der Vordergrund. Tipp: Nutze will-change: transform auf den animierten Elementen für Hardware-Beschleunigung.",[],{"_key":128,"_type":10,"children":129,"markDefs":134,"style":18},"05fd733c-4ab",[130],{"_key":131,"_type":14,"marks":132,"text":133},"a46ee26f-dbf",[],"Pattern 3: Pinning und Horizontal Scroll",[],{"_key":136,"_type":10,"children":137,"markDefs":142,"style":27},"7abe3a09-d72",[138],{"_key":139,"_type":14,"marks":140,"text":141},"1077eb04-ac6",[],"ScrollTrigger kann Elemente beim Scrollen fixieren (pinnen). Kombiniert mit horizontalem Scroll erzeugst du beeindruckende Showcase-Sektionen. Beachte: Pinning kann auf mobilen Geräten problematisch sein – teste gründlich und biete einen Fallback.",[],{"_key":144,"_type":10,"children":145,"markDefs":150,"style":18},"15226d0a-ac5",[146],{"_key":147,"_type":14,"marks":148,"text":149},"0803a778-ff6",[],"Performance-Tipps",[],{"_key":152,"_type":10,"children":153,"level":60,"listItem":61,"markDefs":158,"style":27},"31ca5dc0-309",[154],{"_key":155,"_type":14,"marks":156,"text":157},"aec15405-9f3",[],"Nutze will-change sparsam und nur auf animierten Elementen",[],{"_key":160,"_type":10,"children":161,"level":60,"listItem":61,"markDefs":166,"style":27},"19d966a9-446",[162],{"_key":163,"_type":14,"marks":164,"text":165},"3ce8c7ca-9d7",[],"Animiere nur transform und opacity – diese Properties werden GPU-beschleunigt",[],{"_key":168,"_type":10,"children":169,"level":60,"listItem":61,"markDefs":174,"style":27},"7e004511-6e6",[170],{"_key":171,"_type":14,"marks":172,"text":173},"6e48a969-534",[],"Verwende ScrollTrigger.batch() für viele gleichartige Elemente",[],{"_key":176,"_type":10,"children":177,"level":60,"listItem":61,"markDefs":182,"style":27},"12c8c53f-13d",[178],{"_key":179,"_type":14,"marks":180,"text":181},"75744216-339",[],"Räume ScrollTrigger-Instanzen in onUnmounted auf (Memory Leaks vermeiden)",[],{"_key":184,"_type":10,"children":185,"markDefs":190,"style":18},"3c1e1bb6-388",[186],{"_key":187,"_type":14,"marks":188,"text":189},"00721f4b-f28",[],"Accessibility",[],{"_key":192,"_type":10,"children":193,"markDefs":198,"style":27},"f8f7a9ab-d09",[194],{"_key":195,"_type":14,"marks":196,"text":197},"2d1b20b5-6b5",[],"Respektiere die prefers-reduced-motion Media Query. Nutzer, die reduzierte Bewegung bevorzugen, sollten die Inhalte ohne Animation sehen. Ein einfacher Check: Wenn matchMedia(\"(prefers-reduced-motion: reduce)\").matches, überspringe die Animation und setze die Elemente direkt auf ihren Endzustand.",[],null,"tutorial",{"alt":202,"asset":203,"credit":206,"creditUrl":207},"Farbige Retro-Lichter – Animation und Motion Design",{"_id":204,"url":205},"image-011116580d098ccbc98cfcc8969c4b7bbdcfe7db-1200x800-jpg","https:\u002F\u002Fcdn.sanity.io\u002Fimages\u002Ff1irfjak\u002Fproduction\u002F011116580d098ccbc98cfcc8969c4b7bbdcfe7db-1200x800.jpg","Foto von Lorenzo Herrera auf Unsplash","https:\u002F\u002Funsplash.com\u002F@lorenzoherrera","Wie du mit GSAP ScrollTrigger professionelle Scroll-Animationen baust, die performant und zugänglich sind. Mit praktischen Code-Beispielen.",false,"2026-01-28T10:00:00Z",7,"Lerne GSAP ScrollTrigger: Professionelle Scroll-Animationen mit Performance-Optimierung und Accessibility. Praktische Code-Beispiele.","GSAP ScrollTrigger Tutorial: Scroll-Animationen für Websites",{"_type":215,"current":216},"slug","gsap-scrolltrigger-scroll-animationen",[218,219,220,221,222],"GSAP","Animation","ScrollTrigger","CSS","JavaScript","GSAP ScrollTrigger: Scroll-Animationen für moderne Websites"]