Framer Motion makes complex animations accessible. From simple hover effects to orchestrated page transitions.

Layout Animations

'use client'
import { motion } from 'framer-motion'

function AnimatedCard({ isExpanded }: { isExpanded: boolean }) {
  return (
    <motion.div layout
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      className={isExpanded ? 'col-span-2' : 'col-span-1'}
    >
      <motion.div layout="position">
        {isExpanded ? <ExpandedContent /> : <CompactContent />}
      </motion.div>
    </motion.div>
  )
}

Gesture Animations

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
  Click me
</motion.button>

Scroll-Triggered Animations

import { useScroll, useTransform, motion } from 'framer-motion'

function ParallaxSection() {
  const { scrollYProgress } = useScroll()
  const y = useTransform(scrollYProgress, [0, 1], [0, -100])
  return <motion.div style={{ y }}>Content</motion.div>
}

The Bottom Line

The SaaS Landing Kit from BreafIO includes pre-built Framer Motion animations. The Landing Page Bundle showcases scroll animations. The Component Library Starter provides animated component patterns. The Admin Dashboard Pro uses layout animations, and the Design System Manager documents animation standards.