framer-motion-scroll
Official Framer Motion skill for scroll-linked animations — useScroll, useTransform, scroll-triggered animations, parallax. Use when building scroll-driven animations, parallax effects, progress indicators, or when asking about Framer Motion scroll, useScroll, or scroll-linked animations.
- Installs
- 815
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/c-jeril/framer-motion-skills --skill framer-motion-scroll- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads framer-motion-scroll automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Framer Motion Scroll Animations
When to Use This Skill
Apply when implementing scroll-driven animations: using useScroll, useTransform, scroll-linked effects, parallax, or progress indicators. When the user asks about scroll animation in Framer Motion, recommend Framer Motion's scroll utilities.
Related skills: For core animation use framer-motion-core; for variants use framer-motion-variants; for layout animations use framer-motion-layout.
useScroll
useScroll tracks scroll progress:
import { useScroll, useTransform } from "framer-motion";
function Component() {
const { scrollYProgress } = useScroll();
return (
<motion.div
style={{ scaleX: scrollYProgress }}
/>
);
}
useScroll Options
const { scrollYProgress } = useScroll({
target: ref,
offset: ["start end", "end start"],
container: containerRef
});
Offset Format
"start end" where each can be: start, center, end, or percentage.
| Combination | Meaning |
|---|---|
["start end", "end start"] | While element visible |
["start 100%", "end -100%"] | While scrolling down |
[0, 1] | Entire document scroll |
useTransform
Map one motion value to another:
const { scrollYProgress } = useScroll();
const scale = useTransform(scrollYProgress, [0, 1], [1, 2]);
const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [0, 1, 0]);
return <motion.div style={{ scale, opacity }} />;
Multi-step Transforms
const x = useTransform(
scrollYProgress,
[0, 0.3, 0.6, 1],
[0, -50, 50, 0]
);
Disable Clamping
const x = useTransform(
scrollYProgress,
[0, 1],
[0, 100],
{ clamp: false }
);
Parallax Effect
Different scroll speeds for depth:
function ParallaxSection() {
const { scrollYProgress } = useScroll({
target: ref,
offset: ["start end", "end start"]
});
const y = useTransform(scrollYProgress, [0, 1], [100, -100]);
return (
<motion.div ref={ref} style={{ y }}>
Parallax Content
</motion.div>
);
}
Scroll Progress Bar
function ScrollProgress() {
const { scrollYProgress } = useScroll();
return (
<motion.div
style={{
scaleX: scrollYProgress,
position: "fixed",
top: 0,
left: 0,
right: 0,
height: 4,
backgroundColor: "#00ff00",
transformOrigin: "0%"
}}
/>
);
}
useInView with Variants
Trigger animation when entering viewport:
import { useInView, motion } from "framer-motion";
import { useRef } from "react";
function FadeInSection() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: "-100px" });
return (
<motion.div
ref={ref}
initial={{ opacity: 0, y: 50 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.6 }}
>
Content
</motion.div>
);
}
useInView Options
| Prop | Type | Default | Description |
|---|---|---|---|
| once | boolean | false | Only trigger once |
| margin | string | "0px" | Offset for trigger |
| amount | "any" | "all" | number | "any" | Visibility threshold |
Best practices
- ✅ Use useScroll with useTransform for scroll-linked animations.
- ✅ Use whileInView for simple scroll-triggered animations.
- ✅ Use proper offset values to control start/end.
- ✅ Use
transformOriginfor scale animations.
Do Not
- ❌ Use scroll animations without offset values.
- ❌ Forget to set height on scroll containers for horizontal scroll.
- ❌ Animate layout properties for scroll effects.
- ❌ Use
useInViewwithoutonce: truefor entrance animations.
Learn More
https://www.framer.com/motion/use-scroll/ https://www.framer.com/motion/use-transform/ https://www.framer.com/motion/use-in-view/
FAQ
What does the framer-motion-scroll skill do?
Official Framer Motion skill for scroll-linked animations — useScroll, useTransform, scroll-triggered animations, parallax. Use when building scroll-driven animations, parallax effects, progress indicators, or when asking about Framer Motion scroll, useScroll, or scroll-linked animations.
How do I install framer-motion-scroll?
Run npx skills add https://github.com/c-jeril/framer-motion-skills --skill framer-motion-scroll in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/framer-motion-scroll/ (personal) or .claude/skills/framer-motion-scroll/ (project).
Which AI agents can use framer-motion-scroll?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is framer-motion-scroll safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains framer-motion-scroll?
It is published by c-jeril in c-jeril/framer-motion-skills. It has 815 recorded installs.
More from c-jeril/framer-motion-skills
framer-motion-react
c-jeril/framer-motion-skills
Official Framer Motion skill for React integration — AnimatePresence, motion components, useAnimation, layout animations. Use when building React animations, using AnimatePresence, Framer Motion with Next.js, or when asking about Framer Motion React patterns, cleanup, or SSR.
framer-motion-layout
c-jeril/framer-motion-skills
Official Framer Motion skill for layout animations — shared layout transitions, layoutId, exit animations, AnimatePresence. Use when building shared element transitions, layout animations, reorderable lists, or when asking about Framer Motion layout, layoutId, or shared transitions.
framer-motion-gestures
c-jeril/framer-motion-skills
Official Framer Motion skill for gesture animations — drag, pan, tap, hover, focus, touch animations. Use when building interactive elements with drag, pan, tap, hover, or touch gestures, or when asking about Framer Motion drag constraints, gesture handlers, or interactive animations.
framer-motion-variants
c-jeril/framer-motion-skills
Official Framer Motion skill for animation variants — state machines, orchestrated animations, stagger, repeat, sequencing. Use when building orchestrated animations, animation state machines, staggered entrances, or when asking about Framer Motion variants, transition variants, or choreographed animations.
Popular other skills
hyperframes-cli
heygen-com/hyperframes
The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.
triage
mattpocock/skills
Move issues and external PRs through a state machine of triage roles, categorise, verify, grill if needed, and write agent-ready briefs.
ask-matt
mattpocock/skills
Ask which skill or flow fits your situation. A router over the skills in this repo.
to-questionnaire
mattpocock/skills
Turn a decision you can't fully answer into a questionnaire for someone else to fill in.
loop-me
mattpocock/skills
Grill me about specs for the workflows I want to build, within this workspace.