astro-gsap-scrolltriggerlisted
Install: claude install-skill Sheshiyer/skill-clusters
# Astro GSAP ScrollTrigger
## Purpose
Use GSAP in Astro without breaking static rendering, route transitions, accessibility, or mobile performance.
## Required Pattern
- Keep all `window`, `document`, `matchMedia`, `gsap`, and `ScrollTrigger` initialization inside client-side `<script>` blocks or imported browser scripts.
- Never access browser APIs in Astro frontmatter; frontmatter runs on the server/build side.
- Register `ScrollTrigger` once in the browser script.
- Initialize on `astro:page-load`.
- Cleanup on `astro:before-swap`.
- Respect `prefers-reduced-motion: reduce`.
- Animate only `transform` and `opacity` unless there is a measured reason.
- Call `ScrollTrigger.refresh()` after layout-affecting images/content are ready.
## Minimal Lifecycle Shape
```astro
<script>
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
let ctx;
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
function cleanup() {
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
ctx?.revert?.();
ctx = undefined;
}
function init() {
cleanup();
if (reduceMotion.matches) return;
ctx = gsap.context(() => {
gsap.to('[data-narrative]', {
opacity: 1,
y: 0,
duration: 0.7,
ease: 'power3.out',
scrollTrigger: {
trigger: '[data-narrative]',
start: 'top 85%',
},
});
});
requestA