CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add logo wall transitions

Browse Source
This commit is contained in:
adilallo
2025-08-21 09:40:37 -06:00
parent b998ea50d2
commit b22b22e205
2 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/LogoWall.stories.js
+10 -1
View File
@@ -17,6 +17,15 @@ export default {
- **LG**: Larger logo sizes and 64px horizontal padding
- **XL**: Largest logo sizes, 160px horizontal padding, and 14px label text
## Animations & Transitions
- **Fade-in Effect**: Logos fade in from opacity 0 to 60% after component mounts (500ms transition)
- **Hover Interactions**: Individual logos respond to hover with:
- Opacity change from 60% to 100%
- Scale transform (105% zoom)
- 500ms smooth transitions for all effects
- **Loading States**: Progressive loading with fallback timer for reliable display
## Props
- **logos** (optional): Array of logo objects with src, alt, size, and order properties. If not provided, uses default partner logos.
@@ -67,7 +76,7 @@ export const Default = {
docs: {
description: {
story:
"Default LogoWall with all partner logos. Displays in a 3×2 grid on mobile, 2×3 grid on small screens, single row on medium screens, and larger sizes on large screens.",
"Default LogoWall with all partner logos. Displays in a 3×2 grid on mobile, 2×3 grid on small screens, single row on medium screens, and larger sizes on large screens. Features smooth fade-in animations and hover interactions.",
},
},
},