gsap-scrolltrigger
gsap-scrolltrigger enables you to create dynamic scroll-based animations and parallax effects using GSAP's powerful ScrollTrigger plugin. Perfect for building engaging, scroll-driven interactions that respond to user viewport movement and create immersive visual experiences on modern websites.
gsap-scrolltrigger lets you trigger animations based on scroll position using the ScrollTrigger plugin. Register ScrollTrigger with GSAP, then define triggers with `gsap.to()` or `gsap.from()`, specifying a `scrollTrigger` object with properties like `trigger` (element), `start`/`end` positions, and `markers` for debugging. You can scrub animations to sync them directly with scroll, creating smooth parallax and scroll-driven effects that respond to viewport movement.
AI-generated summary based on this skill's SKILL.md
Install
freshtechbro/claudedesignskills/gsap-scrolltrigger · repository language: Python
git clone https://github.com/freshtechbro/claudedesignskills
cp -r claudedesignskills/.claude/skills/gsap-scrolltrigger ~/.claude/skills/gsap-scrolltriggerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to create scroll animations with gsap-scrolltrigger?
gsap-scrolltrigger lets you trigger animations based on scroll position using the ScrollTrigger plugin. Register ScrollTrigger with GSAP, then define triggers with `gsap.to()` or `gsap.from()`, specifying a `scrollTrigger` object with properties like `trigger` (element), `start`/`end` positions, and `markers` for debugging. You can scrub animations to sync them directly with scroll, creating smooth parallax and scroll-driven effects that respond to viewport movement.
What is scrolltrigger parallax effect and how do I build one?
gsap-scrolltrigger parallax effects layer elements moving at different speeds based on scroll. Create parallax by animating background and foreground elements with different `duration` values or by using `gsap.to()` with a `scrollTrigger` that targets each layer separately. Set `scrub: true` to sync animation directly with scroll speed, or use `scrub: 1` for a 1-second lag effect. This creates depth and visual interest as users scroll through your page.
How does gsap-scrolltrigger handle timeline sequencing?
gsap-scrolltrigger integrates with GSAP timelines to sequence complex animations. Create a timeline with `gsap.timeline()`, add multiple tweens using `.to()`, `.from()`, or `.fromTo()`, then wrap the entire timeline in a `scrollTrigger` object. Use `scrub` to tie the timeline playback to scroll position, or trigger timeline play/pause at specific scroll points. This lets you orchestrate multi-step animations that unfold as users scroll.
Can gsap-scrolltrigger pin elements while scrolling?
Yes, gsap-scrolltrigger's `pin` property locks elements in place during scroll. Add `pin: true` to your `scrollTrigger` config to pin the trigger element, or `pin: '.selector'` to pin a different element. Combine pinning with animations—for example, pin a section while animating its children, creating storytelling effects. Set `pinSpacing: false` to prevent layout shift, and use `end` to control how long the element stays pinned.
How do I optimize gsap-scrolltrigger performance?
gsap-scrolltrigger performs well by default, but optimize further by using GPU-accelerated properties like `transform` and `opacity` instead of layout-triggering properties. Batch animations with `ScrollTrigger.batch()` to group similar triggers and reduce reflow. Use `will-change` CSS sparingly, lazy-load animations off-screen, and test with DevTools Performance tab. For canvas or Three.js integration, keep animation logic efficient and use `requestAnimationFrame` callbacks.
What easing functions does gsap-scrolltrigger support?
gsap-scrolltrigger inherits GSAP's comprehensive easing library, including `power1`–`power4`, `back`, `elastic`, `bounce`, and `circ`. Use easing in tweens via the `ease` property: `gsap.to(el, {duration: 1, x: 100, ease: 'power2.inOut'})`. For scroll-driven animations with `scrub: true`, easing applies to the tween itself; consider `linear` for scrubbed animations to feel responsive to scroll. Explore easing visualizers in GSAP docs for best practices.
SKILL.md
rendered from the published skill — quoted content, verbatim
GSAP & ScrollTrigger Development
Overview
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.
```javascript // 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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 12 files
.claude/skills/gsap-scrolltrigger/SKILL.md
.claude/skills/gsap-scrolltrigger/assets/easings/easing_visualizer.html
.claude/skills/gsap-scrolltrigger/assets/examples/README.md
.claude/skills/gsap-scrolltrigger/assets/starter_scroll/README.md
.claude/skills/gsap-scrolltrigger/assets/starter_scroll/index.html
.claude/skills/gsap-scrolltrigger/assets/starter_scroll/main.js
.claude/skills/gsap-scrolltrigger/assets/starter_scroll/style.css
.claude/skills/gsap-scrolltrigger/references/api_reference.md
.claude/skills/gsap-scrolltrigger/references/common_patterns.md
.claude/skills/gsap-scrolltrigger/references/easing_guide.md
.claude/skills/gsap-scrolltrigger/scripts/generate_animation.py
.claude/skills/gsap-scrolltrigger/scripts/timeline_builder.py