Gsap Scrolltrigger
Add scroll-linked motion and section reveals on marketing or product pages using GSAP ScrollTrigger patterns without hand-rolling scrub logic.
Overview
gsap-scrolltrigger is an agent skill for the Build phase that guides GSAP ScrollTrigger scroll animations and pinned section effects on web front ends.
Install
npx skills add https://github.com/freshtechbro/claudedesignskills --skill gsap-scrolltriggerWhat is this skill?
- Focused skill slug gsap-scrolltrigger from the Claude Design Skills collection
- Targets GSAP ScrollTrigger patterns for scroll-scrubbed and pin-based animations
- Fits indie landing pages and SaaS marketing sites that need motion without a separate motion designer
- Listed on skills.sh under freshtechbro/claudedesignskills with community install traction
- Complements other claudedesignskills front-end motion and layout skills in the same repo
Adoption & trust: 825 installs on skills.sh; 227 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your landing page feels static and custom scroll animation code turns into brittle listeners and jank.
Who is it for?
Solo builders shipping marketing sites or SaaS UI who already use or plan to use GSAP and want agent-guided ScrollTrigger setup.
Skip if: Native mobile apps, CSS-only motion with no JS, or teams that forbid animation libraries for performance or a11y policy reasons.
When should I use this skill?
User wants scroll-based animations, pinned scroll sections, or ScrollTrigger timelines while building or refining a web front end.
What do I get? / Deliverables
Your agent applies ScrollTrigger-oriented patterns so scroll-linked motion ships with GSAP’s timeline model instead of one-off scroll handlers.
- ScrollTrigger configuration and timeline hooks in page or component code
- Documented scroll ranges, pin behavior, or scrub settings matching the design intent
Recommended Skills
Journey fit
Scroll-driven animation is front-end polish applied while composing pages and components in Build. Frontend subphase is where interaction design, motion, and layout meet shipped UI; ScrollTrigger is a client-side presentation concern.
How it compares
Use this procedural GSAP skill instead of asking the agent to improvise Intersection Observer scroll hacks.
Common Questions / FAQ
Who is gsap-scrolltrigger for?
Indie developers and designers shipping web UI with Claude or Cursor who want scroll-based motion aligned with GSAP ScrollTrigger practices.
When should I use gsap-scrolltrigger?
During Build frontend work when you add parallax, pinned headers, scroll-scrubbed timelines, or section reveals on landing and product pages.
Is gsap-scrolltrigger safe to install?
It is a documentation-style design skill from a community repo; review the Security Audits panel on this Prism page and inspect the GitHub source before enabling in production codebases.
SKILL.md
READMESKILL.md - Gsap Scrolltrigger
# gsap-scrolltrigger Installs: 801 Source: freshtechbro/claudedesignskills { "id": "freshtechbro/claudedesignskills/gsap-scrolltrigger", "url": "https://www.skills.sh/freshtechbro/claudedesignskills/gsap-scrolltrigger", "name": "gsap-scrolltrigger", "slug": "gsap-scrolltrigger", "source": "freshtechbro/claudedesignskills", "installs": 801, "installUrl": "https://github.com/freshtechbro/claudedesignskills", "sourceType": "github" }