Animate Privacy Policy Page: Add Landing-Page-Style Scroll Animations

[coderabbitai]

📋 Overview

Once the Privacy Policy page has been redesigned into a modern, sectioned layout (see prerequisite issue below), this issue tracks the addition of scroll-triggered and entrance animations to the Privacy Policy page — matching the animation quality and style already established on the Landing Page.

⚠️ DEPENDENCY — DO NOT START THIS ISSUE UNTIL THE FOLLOWING IS FULLY MERGED:
# — Redesign Privacy Policy Page: Replace Accordion with Modern Sectioned Layout

This issue requires the sectioned component architecture from that issue. Working on animations before the layout redesign is complete will result in wasted effort and merge conflicts.

Requested by: @kunalverma2512

---

🎯 Goals

• Add smooth, performant scroll-triggered entrance animations to each Privacy Policy section component.
• Match the animation language (timing, easing, transform types) already used on the Landing Page ().
• Ensure animations enhance readability and flow — sections should animate in sequentially as the user scrolls down.
• Animations must not cause layout shift (CLS) or block the main thread.

---

🔍 Prerequisites

Before starting this issue, ensure:

1. Issue Redesign Privacy Policy Page: Replace Accordion with Modern Sectioned Layout #168 is merged — the Privacy Policy page must already use separate section components (, , etc.) and a modern non-stacked layout.
2. You have reviewed how the Landing Page implements its animations and understand the libraries/patterns used (e.g., Framer Motion, CSS transitions, Intersection Observer — check LandingPage.jsx to confirm which approach the project uses).

---

🎨 Animation Requirements

Per-Section Entrance Animation

Each section component should animate in when it enters the viewport. Suggested animation for each section:

• Fade in from 0 → 1 opacity.
• Slide up from translateY(40px) → translateY(0).
• Duration: 0.6s – 0.8s with an ease-out curve.
• Delay: Stagger child elements within a section (heading first, then body text) by ~100ms–150ms.

Section Heading Animation

• Large section headings should animate with a slightly more dramatic entrance — e.g., slide in from the left (translateX(-30px) → translateX(0)) while the body fades up from below.

Scroll-Triggered (not all-at-once)

• Animations must be triggered by scroll position (Intersection Observer or equivalent), not on page load.
• Sections that are not yet in the viewport should be invisible until they scroll into view.
• Once a section has animated in, it should remain visible — do not re-animate on scroll-up.

Performance

• Use CSS will-change: transform, opacity sparingly and only on animated elements.
• Prefer transform and opacity for animations (GPU-composited) — avoid animating height, margin, or padding.
• Animations must not cause Cumulative Layout Shift (CLS > 0).

Respect User Preference

• Wrap all animations in a prefers-reduced-motion media query check (or Framer Motion's useReducedMotion hook). Users who have reduced motion enabled must see the final state instantly with no animation.

---

🛠️ Implementation Notes

1. Study the Landing Page first. Open frontend/src/pages/LandingPage.jsx and identify:
   • Which animation library or approach is used (Framer Motion, GSAP, CSS keyframes, Intersection Observer API, etc.).
   • How scroll-triggered animations are wired up.
   • The exact easing curves, durations, and transform values.
2. Reuse the same approach — do not introduce a new animation library if the Landing Page already uses one.
3. If the project uses Framer Motion, use motion components with viewport prop on each section wrapper:

   <motion.div
     initial={{ opacity: 0, y: 40 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true, margin: '-80px' }}
     transition={{ duration: 0.7, ease: 'easeOut' }}
   >
     {/* section content */}
   </motion.div>

4. If the project uses Intersection Observer with CSS classes, add an is-visible class toggle and define the animation in CSS.
5. Apply animations inside each individual section component (e.g., PrivacyIntro.jsx, PrivacyInfoCollect.jsx) — not in the parent PrivacyPage.jsx — to keep components self-contained.

---

✅ Acceptance Criteria

• Prerequisite issue Redesign Privacy Policy Page: Replace Accordion with Modern Sectioned Layout #168 is merged before work begins.
• Each Privacy Policy section animates in on scroll (fade + slide-up, or equivalent).
• Section headings have a slightly more prominent entrance animation than body text.
• Animations are scroll-triggered (Intersection Observer / whileInView) — not on initial page load.
• Once animated in, sections remain visible on scroll-up (no replay).
• Animations use only transform and opacity (no layout-shift-inducing properties).
• prefers-reduced-motion is respected — reduced-motion users see the final state immediately.
• Animation library/approach matches what is already used on the Landing Page.
• No new animation dependencies are introduced without maintainer approval.
• No React console errors or warnings.
• Tested on Chrome, Firefox, and Safari (mobile + desktop).

---

🔗 References

• Prerequisite (must be merged first): # — Redesign Privacy Policy Page
• Landing Page (animation reference): frontend/src/pages/LandingPage.jsx
• Privacy Policy content: [Feature]: Add Privacy Policy Page #163
• Privacy Policy accordion implementation: project page fixed #164

[ArshiBansal]

@kunalverma2512 please assign this