GSAP (GreenSock Animation Platform) is the industry-leading JavaScript animation library for creating high-performance, production-quality animations. ScrollTrigger is GSAP's powerful plugin for scroll-driven animations. Together, they enable everything from simple UI transitions to complex scroll-based storytelling experiences.
Fetches gsap-scrolltrigger from freshtechbro/claudedesignskills and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/gsap-scrolltrigger
Restart Cursor to activate gsap-scrolltrigger. Access via /gsap-scrolltrigger in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
GSAP (GreenSock Animation Platform) is the industry-leading JavaScript animation library for creating high-performance, production-quality animations. ScrollTrigger is GSAP's powerful plugin for scroll-driven animations. Together, they enable everything from simple UI transitions to complex scroll-based storytelling experiences.
Core Concepts
The Basics: Tweens
A tween is a single animation from point A to point B.
// Animate TO a state (from current)gsap.to(".box",{x:200,rotation:360,duration:1,ease:"power2.inOut"});// Animate FROM a state (to current)gsap.from(".box",{opacity:0,y:-50,duration:0.8});// Animate FROM-TO (define both start and end)gsap.fromTo(".box",{opacity:0,scale:0.5},// FROM{opacity:1,scale:1,duration:1}// TO);
Timelines: Sequencing Animations
Timelines orchestrate multiple tweens in sequence or overlap.
const tl = gsap.timeline();// Sequential by defaulttl.to(".box1",{x:100,duration:1}).to(".box2",{y:100,duration:1}).to(".box3",{rotation:360,duration:1});// With labels for organizationtl.addLabel("start").to(".hero",{opacity:1,duration:1}).addLabel("reveal").to(".content",{y:0,duration:0.8},"reveal")// Start at "reveal" label.to(".cta",{scale:1,duration:0.5},"reveal+=0.5");// 0.5s after "reveal"
Position Parameter (Timeline Timing)
Control when animations start within a timeline:
const tl = gsap.timeline();// Default: One after anothertl.to(".box1",{x:100}).to(".box2",{x:100});// Starts after box1 finishes// Start at the same timetl.to(".box1",{x:100}).to(".box2",{y:100},0);// Starts at 0 seconds// Relative positioningtl.to(".box1",{x:100,duration:2}).to(".box2",{y:100},"-=1");// Starts 1 second before box1 ends.to(".box3",{rotation:360},"+=0.5");// Starts 0.5s after box2 finishes// At a specific timetl.to(".box1",{x:100},2.5);// Starts at 2.5 seconds
ScrollTrigger Fundamentals
Basic Scroll Animation
gsap.registerPlugin(ScrollTrigger);gsap.to(".box",{x:500,scrollTrigger:{trigger:".box",start:"top center",// When top of trigger hits center of viewportend:"bottom center",markers:true,// Development only - shows start/end positionsscrub:true,// Links animation to scrollbartoggleActions:"play none none reverse"// onEnter onLeave onEnterBack onLeaveBack}});
Start & End Positions
Format: "[trigger position] [viewport position]"
// Common patternsstart:"top top"// Trigger top hits viewport topstart:"top center"// Trigger top hits viewport center (default)start:"top bottom"// Trigger top hits viewport bottomstart:"center center"// Trigger center hits viewport center// With offsetsstart:"top top+=100"// 100px below viewport topstart:"top 80%"// 80% down the viewportend:"+=500"// 500px after start positionend:"bottom top"// Trigger bottom hits viewport top
Scrubbing (Scroll-Synced Animation)
// Boolean: Direct link to scrollbar (immediate)scrub:true// Number: Smoothing delay in secondsscrub:1// Takes 1 second to "catch up" to scrollbarscrub:0.5// Faster, tighter feel
›Access to product documentation and roadmap tools (Jira, Notion, etc.)
›Understanding of product management frameworks (RICE, Jobs-to-be-Done, etc.)
›Stakeholder contact information and communication channels
Time Estimate
30-60 minutes to see productivity improvements
Steps
1Install product management skill
2Start with user story generation for known feature
3Progress to competitive analysis: research 2-3 competitors
4Use for roadmap prioritization: apply RICE/ICE scoring
5Draft stakeholder communications and refine based on feedback
6Build template library for recurring PM tasks
7Share effective prompts with product team
Common Pitfalls
⚠Not validating competitive research—verify facts before sharing
⚠Accepting user stories without involving engineering team
⚠Over-relying on frameworks without qualitative judgment
⚠Not customizing outputs to company culture and communication style
⚠Skipping stakeholder validation of generated requirements
Best Practices
✓ Do
+Validate research and competitive analysis with real data
+Collaborate with engineering when generating technical requirements
+Customize frameworks and templates to your company context
+Use skill for first drafts, refine with stakeholder input
+Document successful prompt patterns for PM tasks
+Combine AI efficiency with human judgment and intuition
✗ Don't
−Don't publish competitive analysis without fact-checking
−Don't finalize user stories without engineering review
−Don't make prioritization decisions solely on AI scoring
−Don't skip customer validation of generated requirements
−Don't ignore company-specific context and culture
💡 Pro Tips
★Provide context: company goals, constraints, customer feedback
★Ask for alternatives: 'Show 3 ways to prioritize this roadmap'
★Request stakeholder-specific formatting: 'Executive summary vs. engineering spec'
★Use skill for 70% generation + 30% customization to company needs
When to Use This
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
Learning Path
1Basic: user stories, feature specs, status updates
