framer-motion

Create declarative animations and gestures for React components with Framer Motion.

4|Updated Jan 15, 2026

Search Tags:#ui #react #animation #transitions #gestures #framer motion

Ready to run

npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill framer-motion-mgd34msu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: framer-motion
Source: https://github.com/mgd34msu/goodvibes-gemini/tree/main/skills/framer-motion
Command: npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill framer-motion-mgd34msu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation of complex and engaging animations within React applications, enhancing user experience and visual appeal.

Core Features & Use Cases

Declarative Animations: Define animations using simple props and variants.
Gesture Support: Easily implement interactive animations triggered by user gestures like hover, tap, and drag.
Layout Animations: Animate elements smoothly as they enter, exit, or change position on the screen.
Scroll-Based Animations: Create dynamic effects tied to user scrolling.
Use Case: Add smooth page transitions in a Next.js app, create interactive buttons that react to hover and tap, or build a parallax scrolling effect for a hero section.

Quick Start

Install framer-motion by running npm install framer-motion in your project's terminal.

Frequently Asked Questions about framer-motion

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

FAQPage Schema

How do I create declarative animations for React components?▼

Declarative animations for React components are created by defining simple props and variants, enabling transitions and interactive elements without complex imperative code.

Can I add scroll-based animations and layout transitions in a Next.js app?▼

Yes, layout animations and scroll-based animations integrate seamlessly with Next.js, allowing you to build dynamic effects tied to user scrolling and smooth element transitions.

What is the best way to implement hover, tap, and drag gestures in a React UI?▼

Implementing hover, tap, and drag gestures in a React UI is handled through built-in gesture support, easily triggering interactive animations directly from user inputs.

How do I animate elements smoothly as they enter and exit the screen?▼

Layout animations animate elements smoothly as they enter, exit, or change position on the screen, ensuring visually appealing transitions within web applications.

Do I need to install any specific packages to add transitions and gestures to my web application?▼

Yes, you need to run npm install framer-motion in your project's terminal to enable declarative animations, gestures, and layout transitions within your React application.