Skip to content

Conversation

@AbhiVarde
Copy link
Contributor

Feature

Enhanced features page with smooth, grouped scroll animations for better visual engagement.

Solution

  • Implemented Intersection Observer API for scroll-based animations
  • Added grouped animations per feature section (Analytics, Insights, Privacy, Cloud)
  • Applied staggered fade-in effect with 30ms delay between feature cards
  • Used subtle translateY (15px) for smooth upward motion
  • Set fast 0.3s transition duration for snappy, professional feel
  • Maintained all original Umami components and design system

Technical Details

  • Created FeatureSection component with animation logic
  • Each section triggers animation independently when entering viewport
  • Animation parameters: opacity 0→1, translateY 15px→0, 0.3s ease-out
  • Threshold: 0.05 with -80px bottom margin for optimal trigger timing

Testing

Verified smooth animations and proper stagger timing across different viewport sizes and scroll speeds.

Changes

  • Updated app/(website)/features/page.tsx with animated FeatureSection component
  • Preserved all existing feature content and Umami design components
  • No breaking changes to existing functionality

@vercel
Copy link

vercel bot commented Nov 26, 2025

@AbhiVarde is attempting to deploy a commit to the umami-software Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant