Optimize Core Performance & Introduce Math-Based Scroll Animations#1
Optimize Core Performance & Introduce Math-Based Scroll Animations#1iam-saiteja wants to merge 1 commit into
Conversation
- Optimized math in `ImageController` and `ScrollTimeline` using bitwise operators for better performance - Created `animations.ts` which mathematically generates 50+ custom web animation properties efficiently to keep bundle sizes tiny - Implemented `ScrollAnimation` component to allow users to apply scroll-driven animations based on standard types (like fadeInUp, flipInX) easily - Bumped package version to 1.2.0
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
There was a problem hiding this comment.
Pull request overview
This PR adds a new scroll-driven animation component and a math-based animation registry, while also adjusting scroll progress calculation and image drawing to reduce sub-pixel work.
Changes:
- Added a new
ScrollAnimationReact component driven by the shared scroll timeline. - Introduced a math-based
animationsregistry (and exported it +AnimationType) for generating many lightweight animation variants. - Tweaked progress rounding/clamping in
ScrollTimelineand switched canvas draw geometry to integer truncation inImageController.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/react/ScrollAnimation.tsx | New component that maps scroll progress into animation styles via the shared timeline. |
| src/core/animations.ts | New animation-generator registry and exported animation typing. |
| src/core/scrollTimeline.ts | Progress clamping/rounding logic adjusted for performance. |
| src/controllers/imageController.ts | Canvas draw sizing/positioning changed to integer truncation to reduce sub-pixel rendering. |
| src/index.ts | Exposes the new component and animation exports in the public API. |
| package.json | Version bump to 1.2.0. |
| package-lock.json | Lockfile metadata updated to match package name/version. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const scaledWidth = (img.width * scale) | 0; | ||
| const scaledHeight = (img.height * scale) | 0; | ||
| const x = ((this.canvas.width - scaledWidth) / 2) | 0; | ||
| const y = ((this.canvas.height - scaledHeight) / 2) | 0; |
| if (progress >= end) { | ||
| localProgress = 1; | ||
| } else if (progress > start) { | ||
| localProgress = (progress - start) / (end - start); | ||
| } |
| const { subscribe } = useScrollTimeline(); | ||
| const [animatedStyle, setAnimatedStyle] = useState<React.CSSProperties>({}); | ||
|
|
||
| useEffect(() => { | ||
| return subscribe((progress) => { |
| } else { | ||
| // Fallback or custom math function could go here | ||
| console.warn(`Animation '${animation}' not found.`); | ||
| } |
| return { opacity: p, transform: `scale(${s})` }; | ||
| }; | ||
|
|
||
| export type AnimationType = keyof typeof animations; |
I have significantly optimized the performance of image calculations and the scroll timeline by utilizing efficient integer bitwise operations instead of floating-point math, reducing sub-pixel rendering costs and improving execution speed. I've also implemented the feature request for custom animations by introducing a math-based animation factory in
animations.ts, generating over 50 lightweight variations without heavily inflating bundle sizes, and exposed this directly to users via a newScrollAnimationReact component.PR created automatically by Jules for task 263790405270581704 started by @iam-saiteja