Gothsec/Astro-portfolio

Page load animation

Open

#38 opened on Feb 8, 2025

View on GitHub
 (2 comments) (0 reactions) (0 assignees)Astro (140 forks)auto 404
enhancementgood first issue

Repository metrics

Stars
 (245 stars)
PR merge metrics
 (PR metrics pending)

Description

The goal is to enhance the initial user experience by providing an engaging and polished transition from the loading state to the fully rendered page.

  • Improved First Impressions: A dynamic animation creates a modern look and feel, making the website more visually appealing.
  • Enhanced Engagement: The animation provides immediate visual feedback, helping to keep users engaged during the initial loading period.
  • Better Perceived Performance: Even if actual load times are unchanged, a well-designed animation can improve the perceived speed and smoothness of the site.

(You can use GSAP or Framer Motion)

Contributor guide

Research direction
Explore adding a page load animation using Framer Motion or GSAP. Start by identifying the entry point of the application (likely App.tsx or layout) and implement a fade in or slide in animation for the main content. Review existing animations in the repo for consistency.
Tech stack
astroreacttypescripttailwindcss
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
GitReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70