Framer Motion Tips: Scroll Animations That Delight Users

Why Animations Matter

Well-crafted animations don't just look nice — they guide attention, communicate state changes, and make an interface feel alive. The key is subtlety: animations should enhance, never distract.

Viewport-Triggered Animations

function AnimatedSection({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ duration: 0.6, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  );
}

Stagger Children

const container = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { staggerChildren: 0.1 } },
};
const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 } };

function SkillsList({ skills }) {
  return (
    <motion.ul variants={container} initial="hidden" animate="show">
      {skills.map(skill => (
        <motion.li key={skill.id} variants={item}>{skill.name}</motion.li>
      ))}
    </motion.ul>
  );
}

Performance Tips

• Prefer animating transform and opacity — they don't cause layout recalculation
• Use viewport={{ once: true }} so animations only run once
• Avoid animating too many elements simultaneously on mobile