{"enrichment":{"faq":[{"a":"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.","q":"How to create scroll animations with gsap-scrolltrigger?"},{"a":"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.","q":"What is scrolltrigger parallax effect and how do I build one?"},{"a":"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.","q":"How does gsap-scrolltrigger handle timeline sequencing?"},{"a":"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\u2014for 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.","q":"Can gsap-scrolltrigger pin elements while scrolling?"},{"a":"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.","q":"How do I optimize gsap-scrolltrigger performance?"},{"a":"gsap-scrolltrigger inherits GSAP's comprehensive easing library, including `power1`\u2013`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.","q":"What easing functions does gsap-scrolltrigger support?"}],"shadow_tags":["scroll-driven-ui","animation-sequencing","gpu-accelerated","interactive-storytelling","scroll-sync","timeline-orchestration","parallax-layers","scroll-performance","dom-animation","webgl-integration"],"summary_rewrite":"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."},"files":[{"bytes":17238,"path":".claude/skills/gsap-scrolltrigger/SKILL.md","sha256":"8d827576329ffb47e7f434dce71e681627f29c513eefe3698584830f5c90099f","url":"https://skillfed.io/files/freshtechbro/claudedesignskills/gsap-scrolltrigger/ebc79707/SKILL.md"}],"id":"freshtechbro/claudedesignskills/gsap-scrolltrigger","links":{"html":"https://skillfed.io/freshtechbro/claudedesignskills/gsap-scrolltrigger","md":"https://skillfed.io/freshtechbro/claudedesignskills/gsap-scrolltrigger.md","repo":"https://github.com/freshtechbro/claudedesignskills"},"meta":{"agents_supported":["claude-code"],"first_seen":"2026-07-28","forks":101,"language":"Python","last_updated":"2025-11-20","license":"MIT","name":"gsap-scrolltrigger","publisher":"freshtechbro","stars":618},"relations":{"similar":[{"id":"EnderPuentes/ai-agent-skills/gsap"},{"id":"qdhenry/Claude-Command-Suite/gsap-animation"},{"id":"Bbeierle12/Skill-MCP-Claude/gsap-scrolltrigger"},{"id":"Mindrally/skills/gsap"},{"id":"Bbeierle12/Skill-MCP-Claude/gsap-react"},{"id":"greensock/gsap-skills/gsap-scrolltrigger"},{"id":"calesthio/OpenMontage/gsap-scrolltrigger"},{"id":"nexu-io/motion-anything/gsap-scrolltrigger"},{"id":"Bbeierle12/Skill-MCP-Claude/gsap-sequencing"},{"id":"DevMartinese/awwwards-animations-skill/awwwards-animations-skill"}]},"slug":{"owner":"freshtechbro","repo":"claudedesignskills","skill":"gsap-scrolltrigger"},"version":"ebc79707"}