Framer Motion

This skill provides guidelines for creating animations using Framer Motion (now Motion) in React projects. It is ideal for developers looking to enhance their skills in motion graphics with a focus on performance and best practices.

000Updated 1mo ago

Animation

Quick InstallView Source

$ npx skills add https://github.com/mindrally/skills --skill framer-motion

Overview

About This Skill

This skill provides expert guidelines for creating performant animations using Motion (the renamed Framer Motion library) in React applications. It covers core principles like importing from the correct package, hardware acceleration best practices, and performance optimization techniques. The skill includes practical patterns for gesture animations, scroll-linked animations, exit animations with AnimatePresence, and staggered list effects. It emphasizes animating only GPU-accelerated properties like transform and opacity while respecting user accessibility preferences through reduced motion detection. Developers learn how to use variants for complex animations, implement spring transitions for natural motion, and debug performance issues to achieve smooth 60fps animations.

How to Use

Install with the command provided to integrate this skill into your environment.

Use Cases

Creating high-performance animations in React apps

Enhancing user experience with smooth transitions

Implementing best practices for motion graphics design

Setup & Installation

Quick Install

Terminal

$ npx skills add https://github.com/mindrally/skills --skill framer-motion

Alternative Install (Git Clone)

git clone https://github.com/mindrally/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a Framer Motion animation for a [COMPANY]'s [INDUSTRY] website landing page. The animation should include: a hero section fade-in, a button hover effect with scale and color change, and a staggered list animation for three key features. Use smooth easing and a duration of 1 second. Here's the data: Hero heading: 'Welcome to [COMPANY]', Button text: 'Get Started', Features: ['Lightning-fast performance', 'Seamless user experience', 'Scalable architecture'].

Example Output

# Framer Motion Animation Code for [COMPANY]'s Landing Page

```jsx
import { motion } from 'framer-motion';
import React from 'react';

const LandingPage = () => {
  return (
    <div className="min-h-screen bg-gradient-to-r from-blue-50 to-indigo-100">
      {/* Hero Section with Fade-In Animation */}
      <motion.h1
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1, ease: 'easeOut' }}
        className="text-5xl font-bold text-center pt-20 text-indigo-800"
      >
        Welcome to [COMPANY]
      </motion.h1>

      {/* Animated Button */}
      <motion.button
        whileHover={{ scale: 1.05, backgroundColor: '#6366f1' }}
        whileTap={{ scale: 0.95 }}
        transition={{ duration: 0.3, ease: 'easeInOut' }}
        className="mx-auto block mt-8 px-8 py-3 bg-indigo-600 text-white rounded-lg shadow-lg"
      >
        Get Started
      </motion.button>

      {/* Staggered Feature List */}
      <motion.ul
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ staggerChildren: 0.2 }}
        className="mt-16 max-w-2xl mx-auto space-y-4"
      >
        {['Lightning-fast performance', 'Seamless user experience', 'Scalable architecture'].map((feature, index) => (
          <motion.li
            key={index}
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: index * 0.2 }}
            className="p-4 bg-white rounded-lg shadow-sm"
          >
            {feature}
          </motion.li>
        ))}
      </motion.ul>
    </div>
  );
};

export default LandingPage;
```

## Key Animation Properties Used:
- **Initial/Animate**: Defines start and end states for animations
- **Transition**: Controls duration, easing, and delays
- **StaggerChildren**: Creates sequential animations for list items
- **WhileHover/WhileTap**: Adds interactive micro-interactions

This implementation ensures smooth, performant animations that enhance user engagement without sacrificing load times.

Apply to these tools

Browse all tools

Framer

Build better sites, faster with Framer.

Slow-Motion-App

Innovative slow-motion video analysis for industrial applications

Compatible MCP servers

Browse all MCP servers

Find the right skills for your stack

Take a free 3-minute scan and get personalized AI skill recommendations.

Take free scan

Overview

About This Skill

How to Use

Install with the command provided to integrate this skill into your environment.

Use Cases

Creating high-performance animations in React apps

Enhancing user experience with smooth transitions

Implementing best practices for motion graphics design

Quick Install

Terminal

$ npx skills add https://github.com/mindrally/skills --skill framer-motion

Alternative Install (Git Clone)

git clone https://github.com/mindrally/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a Framer Motion animation for a [COMPANY]'s [INDUSTRY] website landing page. The animation should include: a hero section fade-in, a button hover effect with scale and color change, and a staggered list animation for three key features. Use smooth easing and a duration of 1 second. Here's the data: Hero heading: 'Welcome to [COMPANY]', Button text: 'Get Started', Features: ['Lightning-fast performance', 'Seamless user experience', 'Scalable architecture'].

Example Output

# Framer Motion Animation Code for [COMPANY]'s Landing Page

```jsx
import { motion } from 'framer-motion';
import React from 'react';

const LandingPage = () => {
  return (
    <div className="min-h-screen bg-gradient-to-r from-blue-50 to-indigo-100">
      {/* Hero Section with Fade-In Animation */}
      <motion.h1
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1, ease: 'easeOut' }}
        className="text-5xl font-bold text-center pt-20 text-indigo-800"
      >
        Welcome to [COMPANY]
      </motion.h1>

      {/* Animated Button */}
      <motion.button
        whileHover={{ scale: 1.05, backgroundColor: '#6366f1' }}
        whileTap={{ scale: 0.95 }}
        transition={{ duration: 0.3, ease: 'easeInOut' }}
        className="mx-auto block mt-8 px-8 py-3 bg-indigo-600 text-white rounded-lg shadow-lg"
      >
        Get Started
      </motion.button>

      {/* Staggered Feature List */}
      <motion.ul
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ staggerChildren: 0.2 }}
        className="mt-16 max-w-2xl mx-auto space-y-4"
      >
        {['Lightning-fast performance', 'Seamless user experience', 'Scalable architecture'].map((feature, index) => (
          <motion.li
            key={index}
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: index * 0.2 }}
            className="p-4 bg-white rounded-lg shadow-sm"
          >
            {feature}
          </motion.li>
        ))}
      </motion.ul>
    </div>
  );
};

export default LandingPage;
```

## Key Animation Properties Used:
- **Initial/Animate**: Defines start and end states for animations
- **Transition**: Controls duration, easing, and delays
- **StaggerChildren**: Creates sequential animations for list items
- **WhileHover/WhileTap**: Adds interactive micro-interactions

This implementation ensures smooth, performant animations that enhance user engagement without sacrificing load times.

Framer Motion

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Apply to these tools

Framer

Slow-Motion-App

Compatible MCP servers

MCP Documentation Search Server

robot-mcp-server

Framer Plugin MCP Server

Find the right skills for your stack

Framer Motion

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Apply to these tools

Framer

Slow-Motion-App

Compatible MCP servers

MCP Documentation Search Server

robot-mcp-server

Framer Plugin MCP Server

Find the right skills for your stack