Animated Birthday Wish

A simple, fun, and customizable open-source project for creating an animated birthday wish page.

https://github.com/user-attachments/assets/6d0d6958-9c6e-4e77-a478-3a3b94e0a2ca

Thanks to all of you, it's now one of the most starred projects in this category! 🎉

✨ Easiest Way to Create & Share: Use the eWishWell App! ✨

Want to create a beautiful, animated digital birthday wish without any coding? Check out the new eWishWell web app!

➡️ Try the eWishWell App Now! ⬅️ (It's Free!)

https://github.com/user-attachments/assets/375c0034-5404-4389-a742-c69536d54d91

Why use the eWishWell App?

• ✅ No Coding Required: Easily customize text, colors, fonts and more elements with a simple interface.
• 📱 Mobile-Friendly: Create and view wishes perfectly on any device.
• ⚡ Modern and Performant: Built with the latest web technologies.
• 🚀 Instant Sharing: Get a unique link to share your wish instantly via WhatsApp, email, social media, etc.
• 🎨 More Templates Coming: We're adding more designs and occasions soon!
• 💡 Based on this popular code! Built with the same spirit of fun and personalization.

Click here to create your personalized wish in minutes!

About This Repository (For Developers)

This repository contains the original HTML, CSS, and JavaScript code for the animated birthday wish page. It's perfect if you want to:

• Understand how the animation works.
• Fork the code and make deeper customizations.
• Host the wish page yourself.

Happy Birthday Animation Demo (The animation generated by the code in this repository)

How to Use This Code

1. Fork or Clone: Fork this repository or clone it to your local machine.
2. Customize: Open customize.json and replace the content with your own. Or, edit index.html directly if you know what you're doing.
3. Deploy/Host: Turn on GitHub pages for your repository (Settings > Pages)
4. Share the Link: Share the URL you get at the above step with the recipient

You do not need to create Pull Request to this main repository.

Looking for an easier way? Remember to check out the eWishWell App for a no-code solution!

Technical Overview (Repo Code)

• HTML (index.html): Defines the structure and content placeholders.
• CSS (style.css): Handles styling and the core CSS animations (transitions, keyframes).
• JavaScript (script.js): Manages the sequential display of elements and triggers animations via GSAP.

Contribution

Contributions to this repository (the HTML/JS code) are welcome! Please feel free to submit pull requests for bug fixes or improvements to the core animation code.

Support

Feel free reach out via the contact form on eWishWell if you need any help. You can also get in touch with me directly via email or find me on Twitter. :)

License

This project is licensed under the MIT License.