Skip to content

[UI Enhancement] Add Count-Up Animation Effect for Achievement Numbers #163

@ItsMeRaseeca

Description

@ItsMeRaseeca

Description:
The numbers in the "Our Achievements" section are currently static. To make this section more engaging and visually dynamic, we can implement a count-up animation effect where the numbers animate from 0 up to their actual values when the section comes into view.

Image

Implementation details:

  1. Use a JavaScript library (e.g., CountUp.js) or a custom script to animate the numbers.
  2. Trigger the animation on scroll when the section enters the viewport (using Intersection Observer API or a scroll event).
  3. Ensure the animation runs smoothly and only once per page load.
  4. Keep the animation duration short (1–2 seconds) for better UX.
  5. Maintain accessibility (numbers should still be readable by screen readers).

Please assign me this issue under GSSoC'25 contributor, thanks!

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestgssoc25GirlScript Code of Summer 2025level-3Hard level of issue

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions