Add animation page reveal #117
Description
Description 📹
On our website, we don't have any cool animation to make the page appear smoothly. Would it be possible to display the page with this animation? : https://codepen.io/saranshbarua/pen/WNrMbxJ
We could replace the dark blue (#122845) with our dark green (#0C8654) and the light blue background (#D9FCF8) with our current white-green background (#FCFFFE).
And have something like this:
Add Page Reveal Animation
Objective:
Implement a smooth, visually engaging page reveal animation on the Starknet.ID website, inspired by the referenced CodePen. The animation should use Starknet’s brand colors: dark green (#0C8654) for the overlay and white-green (#FCFFFE) for the background.
Requirements:
- On initial page load (and on client-side route changes), display a full-screen dark green overlay.
- Animate the overlay so it splits vertically from the center outwards, revealing the page content underneath.
- As the overlay retracts, the page content should fade in smoothly.
- The animation duration should be approximately 0.8 seconds, with an ease-in-out timing function.
- The effect should be responsive and look consistent on all devices and screen sizes.
- Replace all blue tones from the reference animation with the specified brand colors.
- The animation should trigger only once per navigation event and not repeat unnecessarily.
- If JavaScript is disabled, the page content should remain visible (no blocking).
- Ensure accessibility: the animation should not interfere with screen readers, and respect user settings for reduced motion.
- Optimize for performance: the animation should not negatively impact page load times or cause layout shifts.
Testing and Validation:
- Verify the animation works on all major browsers and devices.
- Confirm the brand colors are used correctly.
- Test with reduced motion settings enabled to ensure accessibility.
- Check that the animation does not interfere with SEO or page interactivity.
- Ensure the animation does not replay unnecessarily on the same page.
Process:
- Fork the repository and create a new branch using the issue number.
- Implement the animation as described.
- Test thoroughly before submitting a pull request.
- Reference this issue in your PR description (e.g., Close Add animation page reveal #117).
- Only submit a PR if you are assigned to the issue.
- Complete the task within 3 business days.
Warning:
Failure to follow these requirements may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.
Proposed Actions 🛠️
Here’s a checklist of actions to follow for resolving this issue:
-
Fork and Create Branch:
Fork the repository and create a new branch using the issue number:git checkout -b fix-[issue-number]
-
Implement Changes:
[Insert Code snippet if needed with a mardown todo list] -
Run Tests and Commit Changes:
Make sure your changes don't break existing functionality and commit with a clear message:git commit -m "Fix: [Short description of the fix]"
Required 📋
To keep our workflow smooth, please make sure you follow these guidelines:
- Assignment: Don't create a pull request if you weren’t assigned to this issue.
- Timeframe: Complete the task within 3 business days.
- Closing the Issue: In your PR description, close the issue by writing
Close #[issue_id]. - Review Process:
- Once you've submitted your PR, change the label to "ready for review".
- If changes are requested, address them and then update the label back to "ready for review" once done.
- Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.
Thank you for your contribution 🙏