Some animation #109
Some animation #109
Conversation
There was a problem hiding this comment.
Pull request overview
Adds scroll-triggered animations and standardizes spacing/layout across multiple pages using Framer Motion wrappers and a shared Section component.
Changes:
- Introduces reusable animation components (
FadeIn,StaggerContainer) and a layout wrapper (Section). - Updates Home, Projects, Team, and other pages to use consistent section padding/container widths and add scroll/hover effects.
- Adds
framer-motiondependency to support the new animation behavior.
Reviewed changes
Copilot reviewed 16 out of 17 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| pages/team.jsx | Adds fade-in heading/description and staggered member-card animations; updates spacing and hover effects. |
| pages/sponsors.jsx | Updates section spacing/container width for sponsors intro copy. |
| pages/projects/index.jsx | Adds fade-in headings and staggered project card animations; standardizes spacing. |
| pages/projects/[...slug].jsx | Refines project aggregation logic and adjusts writeup page layout/image presentation. |
| pages/links.jsx | Standardizes spacing and adds hover/transition effects to link cards. |
| pages/join.jsx | Converts content blocks into standardized padded sections and updates spacing/gaps. |
| pages/index.jsx | Adds scroll-triggered animations throughout homepage and adopts new Section wrapper for sponsor/company sections. |
| pages/contact.jsx | Renames component and standardizes layout spacing; adds hover scaling for contact links. |
| pages/calendar.jsx | Standardizes calendar page spacing and layout structure. |
| components/sponsorCard.jsx | Enhances sponsor cards with transitions, hover shadow, and image hover scale. |
| components/projectCard.jsx | Enhances project cards with transitions, hover scale/shadow, and link hover transitions. |
| components/companyCard.jsx | Aligns company card styling with sponsor cards (hover shadow/scale). |
| components/animations/StaggerContainer.jsx | New reusable stagger-on-scroll wrapper component (Framer Motion). |
| components/animations/FadeIn.jsx | New reusable fade-in-on-scroll wrapper component (Framer Motion). |
| components/Section.jsx | New standardized section wrapper with optional animated title/subtitle. |
| package.json | Adds framer-motion dependency. |
| package-lock.json | Locks framer-motion and its transitive dependencies. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div ref={ref} className={className}> | ||
| {Children.map(children, (child, index) => { | ||
| if (!isValidElement(child)) return child; | ||
|
|
||
| return ( | ||
| <motion.div | ||
| initial={{ opacity: 0, x: offset.x, y: offset.y }} | ||
| animate={ | ||
| isInView | ||
| ? { opacity: 1, x: 0, y: 0 } |
There was a problem hiding this comment.
StaggerContainer wraps each child in an unstyled motion.div. When the container is used with display: flex/flex-wrap, the wrapper becomes the flex item, so width utilities on the child component (e.g. w-full sm:w-60 in cards) no longer affect layout and can cause items to shrink-to-content.
Consider adding an itemClassName/itemStyle prop (or similar) applied to the wrapper motion.div, with a sensible default that preserves typical card sizing, and update call sites to pass the intended item sizing classes when needed.
| export default function Section({ | ||
| children, | ||
| title, | ||
| subtitle, | ||
| background = "", | ||
| className = "", | ||
| titleClassName = "", | ||
| animate = true, | ||
| animateTitle = true, | ||
| }) { |
There was a problem hiding this comment.
animate is exposed as a prop but never used. This makes the Section API misleading (callers can’t actually disable the FadeIn behavior except via animateTitle). Either remove animate or implement it (e.g., use it to disable all FadeIn wrappers / animated behavior in this component).
| <div className="py-16 lg:py-24 px-4 lg:px-6 max-w-screen-xl mx-auto"> | ||
| <Markdown className="markdown">{content}</Markdown> | ||
| {images.map((img, idx) => ( | ||
| <Image key={idx} src={img} width={500} height={500} alt={title} /> | ||
| ))} | ||
| <div className="mt-6 lg:mt-8 flex flex-wrap gap-6 lg:gap-8"> | ||
| {images.map((img, idx) => ( | ||
| <Image key={idx} src={img} width={500} height={500} alt={title} className="rounded-lg" /> | ||
| ))} |
There was a problem hiding this comment.
This page computes basePath from useRouter() but doesn’t use it anywhere. If images are meant to work when the site is deployed under a Next.js basePath, the src values (currently absolute like /images/projects/...) should be prefixed; otherwise remove the unused basePath variable to avoid lint/build failures.
1 participant
Summary
Changes
New Components
Pages with Animations
Layout Improvements (All Pages)
Card Enhancements
Test Plan