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
Decision gist · record as of 2025-11-20
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.
Use it when
- gsap-scrolltrigger parallax effects layer elements moving at different speeds based on scroll.
- gsap-scrolltrigger integrates with GSAP timelines to sequence complex animations.
Verify before relying
Read SKILL.md below before installing (12 files). Open directory: indexed for reading, not audited.
Install
freshtechbro/claudedesignskills/gsap-scrolltrigger · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create scroll-driven animations and parallax effects”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
gsap-router intelligently directs animation requests to specialized GSAP skills based on your specific needs. It analyzes requirements and routes tasks to the most appropriate handler, streamlining animation workflows and ensuring efficient skill delegation across your animation toolkit.
This skill equips developers with proven architectural patterns for integrating multiple 3D rendering and animation frameworks into cohesive web applications. Learn how to combine Three.js, Babylon.js, React Three Fiber, and GSAP effectively while managing complexity and performance across modern web stacks.
threejs-webgl equips Claude Code with a comprehensive toolkit for creating immersive 3D graphics and WebGL-powered experiences. This skillstack integrates Three.js alongside complementary libraries like GSAP and Babylon.js, enabling developers to craft sophisticated animations and interactive visualizations for modern web applications.
Master graphics API interception across DirectX 9/11/12, OpenGL, and Vulkan to build overlays and analyze render pipelines. Learn VTable hooking techniques, ImGui integration, and shader manipulation for game security research and graphics debugging.
Skill Generator is a meta-skill that scaffolds new Claude Code skills with your choice of execution model. Select sequential mode for linear pipelines with fixed dependencies, or autonomous mode for dynamic, context-aware routing. It generates a complete skill package including directory structure, phase files, and specification templates.
This skill maps the escalation ladder of game cheat implementations, from user-mode memory reads and DLL injection through kernel drivers to hypervisor and DMA-based attacks. It covers memory manipulation, process injection, hooking, visual exploits (ESP), aim assistance, and AI-vision aimbots that bypass traditional detection. Use it to understand the offensive threat model that anti-cheat systems defend against.