perf: optimize website animations and transitions for better performance #331
Conversation
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
|
View your CI Pipeline Execution ↗ for commit c61e473
☁️ Nx Cloud last updated this comment at |
|
View your CI Pipeline Execution ↗ for commit 04ad912
☁️ Nx Cloud last updated this comment at |
jumski
force-pushed
the
Optimize_website_animations_for_better_performance
branch
from
04ad912 to
c61e473
Compare
Merge activity
|
…nce (#331) # Performance Optimization for Website Animations and Effects This PR improves website performance by optimizing animations and visual effects across multiple components: - Simplified text shadows and reduced shadow complexity for better rendering performance - Replaced continuous animations with static effects where appropriate - Optimized the CodeOverlay component by: - Reducing transition time from 0.3s to 0.2s - Replacing complex custom scroll animation with native smooth scrolling - Removing unnecessary animation keyframes - Simplifying hover effects while maintaining visual appeal - Enhanced TestimonialCarousel performance with: - GPU acceleration via `will-change` and `transform: translateZ(0)` - Using `translate3d` for smoother animations - Simplified gradients and shadows - Added proper support for users who prefer reduced motion - Improved homepage CTA cards by: - Reducing shadow complexity - Removing continuous shine animation - Adding subtle transform on hover instead These changes maintain the site's visual appeal while significantly reducing CPU/GPU load, especially on mobile devices and lower-powered systems.
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| scrollable.addEventListener('wheel', (e) => { | ||
| console.log('SlowScroll: wheel event captured'); | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
|
|
There was a problem hiding this comment.
The preventDefault() and stopPropagation() calls on wheel events contradict the PR's stated goal of "replacing complex custom scroll animation with native smooth scrolling." This implementation actually disables native scrolling behavior completely, which can cause accessibility issues for users with assistive technologies or non-standard input devices.
Consider either:
- Removing this entire
SlowScrollcomponent if native scrolling is the intended approach - Making this behavior optional with a preference setting
- Using CSS
scroll-behavior: smoothinstead for a standards-compliant approach
This custom scroll implementation also lacks touch event handling, which would break scrolling on mobile devices.
| scrollable.addEventListener('wheel', (e) => { | |
| console.log('SlowScroll: wheel event captured'); | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| scrollable.style.scrollBehavior = 'smooth'; | |
| // Native smooth scrolling is now enabled via CSS | |
| // This preserves accessibility and works on all devices |
Spotted by Graphite Agent
Is this helpful? React 👍 or 👎 to let us know.
🔍 Preview Deployment: Website✅ Deployment successful! 🔗 Preview URL: https://pr-331.pgflow.pages.dev 📝 Details:
_Last updated: _ |
Performance Optimization for Website Animations and Effects
This PR improves website performance by optimizing animations and visual effects across multiple components:
Simplified text shadows and reduced shadow complexity for better rendering performance
Replaced continuous animations with static effects where appropriate
Optimized the CodeOverlay component by:
Enhanced TestimonialCarousel performance with:
will-changeandtransform: translateZ(0)translate3dfor smoother animationsImproved homepage CTA cards by:
These changes maintain the site's visual appeal while significantly reducing CPU/GPU load, especially on mobile devices and lower-powered systems.