Animation

Name: Cencori
Rating: 5 (1 reviews)

Motion guidelines and animation patterns using CSS transitions and Framer Motion.

CSS Transitions

transition-colorsColor changes only

transition-opacityFade effects

transition-transformScale and translate

transition-allMultiple properties

duration-200Quick (default)

duration-300Standard

duration-500Slow (rare)

Hover Effects

Card Hover

Shadow on hover

Scale Effect

tsx

// Card hover shadow
className="transition-all hover:border-border hover:shadow-lg"

// Button with arrow translate
className="group"
<ArrowRight className="transition-transform group-hover:translate-x-0.5" />

// Scale on hover
className="transition-transform hover:scale-105"

Framer Motion

Fade In

Content

Slide Up

Content

tsx

import { motion } from "framer-motion";

// Fade in
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.3 }}
>
  {content}
</motion.div>

// Slide up
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>
  {content}
</motion.div>

Staggered Children

Animation Guidelines

•Keep durations short: 0.2s to 0.4s maximum
•Use ease-out for entrances, ease-in for exits
•Prefer opacity + transform over layout shifts
•Respect prefers-reduced-motion for accessibility