skills.rest
WP-Coaching
WP-CoachingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

framer-motion-animations

Implement scroll-triggered and entrance animations in React using Framer Motion variants.

Updated Sep 1, 2021
Search Tags:#accessibility#react#nextjs#animations#framer-motion#variants#scroll-triggered
One-click install
npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill framer-motion-animations-wp-coaching
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: framer-motion-animations
Source: https://github.com/WP-Coaching/pellegrims.coach/tree/main/.agents/skills/framer-motion-animations
Command: npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill framer-motion-animations-wp-coaching

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires framer-motion.

What problem does it solve? Adding consistent, accessible animations to a React codebase often leads to duplicated Intersection Observer boilerplate, inconsistent easing curves, and missing reduced-motion support. This Skill standardizes how scroll-triggered reveals, entrance animations, and staggered lists are built with Framer Motion. ## Core Features & Use Cases - Shared Animation Variants: Provides reusable variants (fadeInUp, staggerContainer, staggerItem, heroEntrance) with standard easing curves and durations. - Accessibility Enforcement: Every pattern includes useReducedMotion() handling so animations respect user preferences. - Migration Guidance: Step-by-step conversion from CSS/Intersection Observer patterns to Motion's whileInView API. - Use Case: When building a marketing page section that should fade in on scroll with staggered child cards, apply the staggerContainerVariants and staggerItemVariants pattern with viewport={{ once: true, amount: 0.2 }}. ## Quick Start Add a scroll-triggered fade-in animation to my React section component using Framer Motion with reduced motion support.

Frequently Asked Questions about framer-motion-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add scroll-triggered animations in React with Framer Motion?▼

Use motion.div with the whileInView prop and a variants object defining hidden and visible states. Set viewport={{ once: true, amount: 0.2 }} so the animation triggers once when 20% of the element is visible.

How to create staggered list animations with Framer Motion?▼

Apply a container variant with staggerChildren and delayChildren in its transition, then give each child a matching item variant. The parent controls timing so children animate sequentially without manual delays.

When should I use CSS transitions instead of Framer Motion?▼

Use CSS transitions for hover states, simple state changes, and infinite background keyframe loops. Reserve Framer Motion for scroll-triggered reveals, entrance animations, and staggered lists where orchestration matters.

Does Framer Motion support reduced motion accessibility preferences?▼

Yes, the useReducedMotion hook detects the user's prefers-reduced-motion setting. When true, pass undefined to variants, initial, and transition props so content renders without animation.

How do I migrate from Intersection Observer to Framer Motion?▼

Remove the useState visibility flag, useEffect observer, and ref, then replace the element with motion.div using whileInView and shared variants. Add a useReducedMotion check to preserve accessibility behavior.

Related Skills

Explore More Software Engineering Skills→
aashahinaashahin

aceternity-ui

Install and configure animated React components for Next.js via the shadcn CLI.

Community
Intermediate
go-vikunjago-vikunja
5.2k

run-e2e-tests

Runs Vikunja's Playwright end-to-end tests through the mage test:e2e command.

Official
Basic
moughamirmoughamir

ui-design

Audit and refactor HTML, CSS, JS, and React interfaces for accessibility, performance, and usability.

Community
Intermediate
greensockgreensock
13.3k

gsap-timeline

Coordinate complex animations using the GSAP timeline API.

Official
Advanced