LLMs Resources

Framer Motion Animation Library

A comprehensive collection of reusable animations and interactive components for Next.js applications

Framer MotionTypeScriptReact

Resource Information

Resource Type

Animation Library

Last Updated

March 20, 2025

Downloads

4,782

License

MIT License

Rating

4.7/5

Key Features

60+ Ready-to-Use Animations

Plug-and-play animations for common UI elements like buttons, cards, modals, and more.

TypeScript Support

Fully typed components with TypeScript for better developer experience and type safety.

Modular Architecture

Import only what you need to keep your bundle size small and performance high.

Customizable Variants

Easily customize animations with variant props to match your design system.

Gesture Animations

Interactive animations triggered by hover, tap, drag, and other user gestures.

Comprehensive Documentation

Detailed guides and examples to help you implement animations effectively.

Installation & Usage

Installation

Terminal

npm install framer-motion @privatai/motion-library

Basic Animation Example

components/FadeInExample.tsx

import { motion } from 'framer-motion';

const fadeVariants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1, transition: { duration: 0.5 } }
};

export function FadeInExample() {
  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={fadeVariants}
    >
      Content that fades in
    </motion.div>
  );
}

Interactive Animation Example

components/HoverExample.tsx

import { motion } from 'framer-motion';

export function HoverExample() {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
      className="button"
    >
      Hover Me
    </motion.button>
  );
}

Staggered Animation Example

components/StaggeredListExample.tsx

import { motion } from 'framer-motion';

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1
  }
};

export function StaggeredListExample() {
  return (
    <motion.ul
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {items.map((item, i) => (
        <motion.li key={i} variants={itemVariants}>
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}