Animations

How animations work in Opale UI templates.

Framer Motion

All animations use Framer Motion. Every animated element has motion wrappers with initial, animate, and transition props:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6, ease: [0.2, 0.8, 0.2, 1] }}
/>

Easing

Templates use the custom easing curve [0.2, 0.8, 0.2, 1] for all transitions. This gives a smooth, natural feel.

Scroll Animations

Elements animate into view using whileInView. The viewport prop controls when the animation triggers:

<motion.div
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-80px" }}
/>

Stagger Effects

Lists and grids use staggered delays (40-80ms between elements) for sequential reveal:

{items.map((item, i) => (
  <motion.div
    key={item.id}
    transition={{ delay: i * 0.06 }}
  />
))}

Hover and Press

Hover uses background shifts (never font-weight changes). Press uses scale 0.96 for a subtle physical feedback:

<motion.button
  whileHover={{ backgroundColor: "rgba(255,255,255,0.06)" }}
  whileTap={{ scale: 0.96 }}
/>

Disabling Animations

To disable any animation, replace motion.div with a regular div and remove the animation props.