Skip to content

feat(animation): implement keyframe animation library globally#55623

Merged
SAPTARSHI-coder merged 1 commit into
SAPTARSHI-coder:mainfrom
harrshita123:feat/global-animation-library-harrshita
Jul 25, 2026
Merged

feat(animation): implement keyframe animation library globally#55623
SAPTARSHI-coder merged 1 commit into
SAPTARSHI-coder:mainfrom
harrshita123:feat/global-animation-library-harrshita

Conversation

@harrshita123

@harrshita123 harrshita123 commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

Description

Fixes #55621.

This PR introduces a comprehensive CSS Keyframe Animation Library across all 30 base components. It provides five production-ready animations (fade-in-up, scale-in with spring easing, pulse, spin, shimmer) with stagger delay utilities. All animations use only transform and opacity (GPU compositor thread) and include a prefers-reduced-motion override.

Note: Unique directory and class names (-anim-harrshita) have been used to strictly avoid the repository rules against modifying existing files.

Changes Made

  • Added 30 NEW completely unique example folders in submissions/examples/.
  • Each component receives a detailed style.css (over 80 lines) with keyframes and utility classes.
  • demo.html files include six-panel animation showcase demos.

Checklist

  • I have followed the contribution guidelines
  • demo.html has <!DOCTYPE html>, <html>, <head>, <body> tags
  • style.css has original, meaningful CSS (80+ lines per component)
  • README.md included for every component
  • No edits to core/ or components/ or ANY existing submissions
  • Single squashed commit following conventional-commit format
  • Over 50 lines of code added per component

@harrshita123
feat(animation): implement keyframe animation library globally
df81b7c 
Adds keyframe animation library across 30 components.\n\nFixes SAPTARSHI-coder#55621
@github-actions github-actions Bot added animation Animation effects, hover interactions, motion ideas, transitions contribution good first issue Good for newcomers GSSoC-26 Official GSSoC 2026 issue gssoc:approved Approved for GSSoC contributions help wanted Extra attention needed level:advanced Complex issue requiring deep understanding type:feature New functionality or enhancement labels Jul 25, 2026
@SAPTARSHI-coder

SAPTARSHI-coder commented Jul 25, 2026

Copy link
Copy Markdown
Owner

✅ Submission Validation Passed!

Great job! All required files are present and valid.

📁 Folder: submissions/examples/feat-accordion-animation-library-harrshita

Files found:

  • ✅ demo.html
  • ✅ style.css
  • ✅ README.md

📁 Folder: submissions/examples/feat-alert-animation-library-harrshita

Files found:

  • ✅ demo.html
  • ✅ style.css
  • ✅ README.md

📁 Folder: submissions/examples/feat-avatar-animation-library-harrshita

Files found:

  • ✅ demo.html
  • ✅ style.css
  • ✅ README.md

📁 Folder: submissions/examples/feat-badge-animation-library-harrshita

Files found:

  • ✅ demo.html
  • ✅ style.css
  • ✅ README.md

📁 Folder: submissions/examples/feat-breadcrumb-animation-library-harrshita

Files found:

  • ✅ demo.html
  • ✅ style.css
  • ✅ README.md

📁 Folder: submissions/examples/feat-button-animation-library-harrshita

Files found:

  • ✅ demo.html
  • ✅ style.css
  • ✅ README.md

📁 Folder: submissions/examples/feat-card-animation-library-harrshita

Files found:

  • ✅ demo.html
  • ✅ style.css
  • ✅ README.md

📁 Folder: submissions/examples/feat-carousel-animation-library-harrshita

Files found:

  • ✅ demo.html
  • ✅ style.css
  • ✅ README.md

📁 Folder: submissions/examples/feat-checkbox-animation-library-harrshita

Files found:

  • ✅ demo.html
  • ✅ style.css
  • ✅ README.md

📁 Folder: submissions/examples/feat-chip-animation-library-harrshita

Files found:

  • ✅ demo.html
  • ✅ style.css
  • ✅ README.md

🚀 Next Steps:

  • A maintainer will review your PR
  • Respond to any feedback if requested
  • Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

@SAPTARSHI-coder
SAPTARSHI-coder merged commit b709e2e into SAPTARSHI-coder:main Jul 25, 2026
15 checks passed
@github-actions

github-actions Bot commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

🎉 Congratulations on your PR merge, @harrshita123! 🚀

Thank you so much for your valuable contribution to EaseMotion CSS! Your code is now merged into the main branch.

🎮 Join our Discord Server!
We have an official Discord server for EaseMotion CSS! Join us to connect with other developers, seek help, discuss design choices, and share your creations in the showcase channel: Join the EaseMotion CSS Discord 💜

⭐ If you haven't already, please consider giving this repository a Star! It helps show your support, increases project visibility, and helps us grow the community. ✨

Thank you again, and happy coding! 💻

@github-actions github-actions Bot added accepted Contribution approved for integration into EaseMotion CSS good-pr integrated Successfully merged and included in the framework labels Jul 25, 2026
@github-actions

github-actions Bot commented Jul 25, 2026

Copy link
Copy Markdown
Contributor

🎉 Pull Request Integrated!

Thank you for your contribution, @harrshita123! Your changes have been successfully merged into main and will be credited to your wall. 🚀

📊 Daily Merge Progress: You have merged 10/150 PRs today. Daily quota resets in 19 hrs.

📢 GSSoC Leaderboard Status Update:
Please note that the GSSoC leaderboard servers are currently experiencing platform-wide downtime, so your points may take a few days to reflect. Rest assured, your merged PR is fully recorded in our repository history and all GSSoC labels are correctly assigned.

🎮 Join our Discord Server!
We have an official Discord server for EaseMotion CSS! Join us to connect with other developers, seek help, discuss design choices, and share your creations in the showcase channel: Join the EaseMotion CSS Discord 💜

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

Reviewers

@SAPTARSHI-coder SAPTARSHI-coder Awaiting requested review from SAPTARSHI-coder SAPTARSHI-coder is a code owner

Assignees

@SAPTARSHI-coder SAPTARSHI-coder

@harrshita123 harrshita123

Labels

accepted Contribution approved for integration into EaseMotion CSS animation Animation effects, hover interactions, motion ideas, transitions contribution good first issue Good for newcomers good-pr gssoc:approved Approved for GSSoC contributions GSSoC-26 Official GSSoC 2026 issue help wanted Extra attention needed integrated Successfully merged and included in the framework level:advanced Complex issue requiring deep understanding type:feature New functionality or enhancement

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Global: Add CSS Keyframe Animation Library for all 30 Components

2 participants

@harrshita123 @SAPTARSHI-coder