What is scroll-driven-animation?

A set of GSAP ScrollTrigger rules for connecting page animations to scrolling, including pinned sections and parallax effects.

Use it to build scroll-scrubbed animations, pinned sections, fake horizontal scrolling, parallax effects, and triggers inside horizontally animated content.

It helps keep scroll animations aligned with page layout and responsive to dynamic content such as loaded images and fonts.

scroll-driven-animation — Skill for Claude Code and Codex by jxoesneon

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add jxoesneon/Ciel --skill scroll-driven-animation

Clone the repo

git clone --depth 1 https://github.com/jxoesneon/Ciel

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/jxoesneon/ciel/scroll-driven-animation/github.svg)](https://agentmods.dev/skills/jxoesneon/ciel/scroll-driven-animation)

Your own site

<a href="https://agentmods.dev/skills/jxoesneon/ciel/scroll-driven-animation"><img src="https://agentmods.dev/badge/skills/jxoesneon/ciel/scroll-driven-animation/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/jxoesneon/ciel/scroll-driven-animation"><img src="https://agentmods.dev/badge/skills/jxoesneon/ciel/scroll-driven-animation.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 21 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 557 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00021	$0.00557
Opus 5	$0.00010	$0.00279
Sonnet 5	$0.00004	$0.00111
Haiku 4.5	$0.00002	$0.00056

Measured 8d ago against content hash a758737c0d61, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

scroll-driven-animation scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/scroll-driven-animation/SKILL.md · 55 lines

What it actually says

CIEL ADAPTATION: Scroll-Driven Animation (ScrollTrigger)

This skill formalizes the implementation of scroll-linked effects. it prioritizes layout stability and performant "Scrub" logic.

ScrollTrigger Core

Targeting: Attach ScrollTrigger to the Timeline or top-level Tween, never to children inside a timeline.
Scrub vs Actions:
- Use scrub: true (or a number like 1) for direct link between scroll and progress.
- Use toggleActions for discrete triggers (play/pause/reverse).
Pinning: Don't animate the pinned element itself; animate its children. Set pinSpacing: true (default) to preserve layout flow.

The "Fake" Horizontal Pattern

To implement horizontal scroll inside a vertical page:

Pin the container.
Animate the horizontal wrapper's xPercent to -100.
Mandate: Use ease: "none" on the horizontal tween to ensure a 1:1 scroll-to-position mapping.
Use containerAnimation for any elements that should trigger during the horizontal slide.

Operational Standards

Refresh: Call ScrollTrigger.refresh() AFTER dynamic content (images/fonts) loads.
Priority: Use refreshPriority if creating triggers in a non-sequential (async) order.
Markers: Set markers: true during dev; verify they are REMOVED before integration.

Anti-Patterns

Nesting Triggers: Putting a scrollTrigger inside a tween that is already inside a timeline (breaks logic).
Ease Jitter: Using an ease (like power2) on a scrubbed animation (makes it feel disconnected).
Amnesiac Refresh: Forgetting to refresh after an AJAX content load, causing trigger positions to be offset.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

8d ago First seen · 55 lines · 21 tokens per session scan A a758737c0d61

Subscribe to this mod's changes

scroll-driven-animation is a skill published in the GitHub repository jxoesneon/Ciel (1 stars, last pushed 4d ago), licensed Apache-2.0. It adds 21 tokens to every session and 557 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Autonomous Agents CSS and styling Claude Code Creative and media Frontend agentic-workflows ai ciel domain:web gemini-cli harmonized multi-agent-systems

remotion

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays.

firstsun-dev/skills · 22 tokens

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4…

firstsun-dev/skills · 119 tokens

frontend-slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

Jamkris/everything-gemini-code · 63 tokens

webgl-neon-grid

A real-time synthwave scene — a perspective floor grid scrolling toward a banded retro sun under a neon starfield, all from one fragment shader. No textures. Rendered as a single self-contained index.html. Use when the brief asks for "synthwave", "outrun", "retro 80s", "neon grid", "perspective grid", "vaporwave", or…

nexu-io/open-design · 115 tokens

webgl-distortion-grain

A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.

nexu-io/open-design · 35 tokens

scroll-scrubbed-visual-sequence

Build reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers. Use for hero transformations, product assembly, interface state walkthroughs, object rotation, diagrams, or photo sequences that must move forward and…

MengTo/Skills · 73 tokens