Skip to content

perf: remove redundant GSAP dependency, use Framer Motion exclusively #18

Description

@snowrugar-beep

Problem Statement

Both GSAP (35KB minified) and Framer Motion (45KB) are installed for animations. GSAP is only used in one component (CTA.tsx on the landing page) for scroll-triggered entrance animations. GSAP's ScrollTrigger plugin is registered and used for opacity/blur/y animations. These can be replicated with Framer Motion's useInView hook.

Evidence

  • Frontend/package.json — Both gsap@3.15.0, @gsap/react@2.1.2, and framer-motion@12.40.0 are dependencies
  • Frontend/src/components/landing/CTA.tsx — Uses useGSAP, gsap.from, ScrollTrigger for scroll-based entrance animations
  • Framer Motion is used in Map.tsx and AddGistModal.tsx for spring animations and AnimatePresence

Impact

~35KB unnecessary bundle size for a single component's scroll animations. Dual animation paradigms confuse developers and increase maintenance burden.

Proposed Solution

  1. Remove gsap and @gsap/react from dependencies
  2. Refactor CTA.tsx to use Framer Motion's useInView and motion.div instead of GSAP ScrollTrigger
  3. Remove gsap.registerPlugin(ScrollTrigger) call
  4. Update all imports

Technical Requirements

  • Visual behavior must be identical (opacity, blur, y offset animations on scroll)
  • Stagger delay behavior must be preserved
  • Scroll trigger timing must be equivalent

Acceptance Criteria

  1. CTA section entrance animations work identically to current implementation
  2. ScrollTrigger functionality (start: 'top 80%') preserved
  3. gsap and @gsap/react removed from package.json
  4. npm install succeeds without errors
  5. npm run build succeeds
  6. Bundle size decreases by ~35KB
  7. All existing frontend pages render correctly

File Inventory

  • Frontend/package.json
  • Frontend/src/components/landing/CTA.tsx

Dependencies

None.

Testing Strategy

  • Visual regression: verify CTA animations work in browser
  • Build: verify bundle size decrease
  • Manual: scroll to CTA, verify entrance animation triggers

Security Considerations

Removing a dependency reduces supply chain attack surface.

Definition of Done

  • GSAP removed
  • CTA refactored with Framer Motion
  • Animations visually equivalent
  • Build succeeds
  • Bundle size decreased

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions