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
- Remove gsap and @gsap/react from dependencies
- Refactor CTA.tsx to use Framer Motion's useInView and motion.div instead of GSAP ScrollTrigger
- Remove gsap.registerPlugin(ScrollTrigger) call
- 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
- CTA section entrance animations work identically to current implementation
- ScrollTrigger functionality (start: 'top 80%') preserved
- gsap and @gsap/react removed from package.json
- npm install succeeds without errors
- npm run build succeeds
- Bundle size decreases by ~35KB
- 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
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— Bothgsap@3.15.0,@gsap/react@2.1.2, andframer-motion@12.40.0are dependenciesFrontend/src/components/landing/CTA.tsx— Uses useGSAP, gsap.from, ScrollTrigger for scroll-based entrance animationsImpact
~35KB unnecessary bundle size for a single component's scroll animations. Dual animation paradigms confuse developers and increase maintenance burden.
Proposed Solution
Technical Requirements
Acceptance Criteria
File Inventory
Frontend/package.jsonFrontend/src/components/landing/CTA.tsxDependencies
None.
Testing Strategy
Security Considerations
Removing a dependency reduces supply chain attack surface.
Definition of Done