framer-motion-animations

Name: framer-motion-animations
Availability: InStock
Author: WP-Coaching

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

Ready to run

npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill framer-motion-animations-wp-coaching

💬 Prompt for ChatGPT / Claude Chat▼

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.