AnimateItNow 🚀✨

AnimateItNow

Welcome to AnimateItNow — a creative, open-source hub for beautiful web UI components and animations!
Explore the Live Demo »

Report a Bug · Request a Feature

🚀 Quick Preview

Login Form Animation	Button Hover Effects	Loading Animations
Smooth form transitions	Interactive hover effects	Creative loading states

Modal Animations	Card Transitions	Navigation Effects
Elegant modal displays	Smooth card transitions	Animated navigation

🔁Project Flowchart

🎯Vision

AnimateItNow empowers developers to create stunning, responsive UI animations with ease. Built for speed, creativity, and collaboration — it's your go-to hub for beautiful web motion.

📋 Table of Contents

• 🌟 Quick Start
• 🌈 Features & Demos
• 🛠 Installation & Setup
• 🎯 Open Source Programs
• 🤝 How to Contribute
• 🔧 Project Structure
• 📄 License

🌟 Quick Start

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Basic knowledge of HTML, CSS, and JavaScript
• Git (for contribution)

🚀 Getting Started in 3 Steps

1. Clone the Repository

   git clone https://github.com/itsAnimation/AnimateItNow.git
   cd AnimateItNow 

Open the Project

• Simply open index.html in your web browser

• Or use a local server for better development: bash

  Using Python python -m http.server 8000

  Using Node.js (if you have http-server installed) npx http-server

  Using PHP php -S localhost:8000

Start Exploring!

• Browse templates in the gallery
• View source code for each animation
• Customize and experiment with effects

🛠 Installation & Setup

Local Development Setup

To start working with AnimateItNow locally, follow one of the options below based on your preference and environment.

Option 1: Basic Setup (Quick Start)

1. Clone the Repository

git clone https://github.com/itsAnimation/AnimateItNow.git
cd AnimateItNow

2. Open the Project

• Simply open index.html in your favorite web browser by double-clicking the file or using:
  • macOS:

    open index.html

  • Windows:

    start index.html

  • Linux:

    xdg-open index.html

---

Option 2: Run a Local Server (Recommended for Development)

Running a local server allows you to test animations properly and avoid issues related to browser security policies when loading local files.

Choose one of the following methods:

• Using Python If you have Python installed:

  python -m http.server 8000

  Then open your browser and go to: http://localhost:8000

• Using Node.js If you have Node.js and http-server installed (install it globally if you don't):

  npm install -g http-server
  http-server

  Then open your browser and go to the address shown in the terminal (usually http://localhost:8080).

• Using PHP If you have PHP installed:

  php -S localhost:8000

  Open your browser and go to: http://localhost:8000

---

Option 3: Using VS Code Live Server Extension

If you use Visual Studio Code:

1. Install the Live Server extension.
2. Open the project folder in VS Code.
3. Right-click on index.html and select Open with Live Server.
4. Your default browser will launch and display the project.

---

After Setup

• Browse through the templates folder to explore different animations.
• Open HTML files in the templates folder to see examples.
• Modify CSS and JavaScript files in css/ and js/ directories to customize animations.
• Preview changes live if using a local server or Live Server.

🌈 Features & Demos\

🎨 Animation Categories\

• Button Animations
• Hover effects (glow, bounce, fill, etc.)
• Click animations (ripple, press, etc.)
• Loading states
• Form Animations
• Input field animations
• Validation effects
• Submit button transitions
• Loading Animations
• Spinners and loaders
• Skeleton screens
• Progress indicators
• Modal & Popup Effects
• Entrance/exit animations
• Background overlays
• Interactive modals

🔹 Hover Effects Gallery Effect Preview Code Example

• Blur https://via.placeholder.com/150/6C63FF/FFFFFF?text=Blur class="blur-effect"
• Skew https://via.placeholder.com/150/FF6B6B/FFFFFF?text=Skew class="skew-effect"
• Bounce https://via.placeholder.com/150/4ECDC4/FFFFFF?text=Bounce class="bounce-effect"
• Shadow Pulse https://via.placeholder.com/150/45B7D1/FFFFFF?text=Shadow class="shadow-pulse"

css

/* Example: Combined effects */ .animated-button { transition: all 0.3s ease; }

.animated-button:hover { transform: scale(1.05) skewX(-5deg); filter: blur(0.5px); animation: bounce 0.5s ease; }

🤝 How to Contribute

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Please read our CONTRIBUTING.md for detailed guidelines on our workflow, issue reporting, and pull request process.

📋 Contribution Guidelines

• ✅ Add your animation to the correct category folder
• ✅ Include a preview GIF (300x200 pixels)
• ✅ Add comments to your CSS/JavaScript code
• ✅ Test across different browsers
• ✅ Update the templates gallery page
• ✅ Follow the existing code style

🆕 Good First Issues

• Look for issues labeled good-first-issue or beginner-friendly to start contributing!

🎯 Open Source Programs

🌟 GirlScript Summer of Code 2025 We're excited to be part of GSSoC 2025 - one of India's largest 3-month open source programs!

Benefits for Contributors:

• 🎓Learn from experienced mentors
• 🤝Collaborate with developers worldwide
• 📜Receive certificates and swag
• 🏆Get recognition for your work
• 💼Build your portfolio with real-world projects

📁 Project Structure

AnimateItNow/
│
├─ .github/                     # GitHub configuration files (workflows, templates)
│  ├─ ISSUE_TEMPLATE/           # Issue templates
│  ├─ workflows/                # GitHub Actions workflows
│  ├─ ISSUE_TEMPLATE.md         # Default issue template
│  └─ PULL_REQUEST_TEMPLATE.md  # Pull request template
│
├─ .vscode/                     # VSCode settings
│  └─ settings.json             # Workspace settings
│
├─ ai-assistant/                # AI assistant related files
│  └─ chatbot-data.json
│
├─ index.html                   # Main entry HTML page
├─ script.js                    # Main JS file
├─ styles.css                   # Main CSS file
│
├─ background_templates/        # Background templates for animations
│  ├─ demo/                     # Demo templates
│  ├─ blue_wave_background.html
│  └─ dark_starry_background.html
│
├─ images/                      # Images used across templates
│
├─ src/css/                     # Additional CSS files
│
├─ svg/                         # SVG assets
│
├─ templates/                   # Pre-built HTML templates
│  └─ sample-templates/
│
├─ HTML Templates               # Individual HTML pages with effects
│  ├─ 404.html
│  ├─ Animation.html
│  ├─ CardHoverEffects.html
│  ├─ Coming_Soon_Landing_Page.html
│  ├─ Flip.html
│  ├─ LoadingSpinner.html
│  ├─ LoginFormGlassMorphism.html
│  ├─ Progress_Bar.html
│  ├─ Side.html
│  ├─ Testinomials_Sliders.html
│  ├─ Type-animation.html
│  ├─ Wave.html
│  ├─ accordian.html
│  ├─ animated-btn.html
│  ├─ button.html
│  ├─ card_hover.html
│  ├─ carousel.html
│  ├─ checkboxes.html
│  ├─ code_playground.html
│  ├─ contact.html
│  ├─ display.html
│  ├─ faq_acc.html
│  ├─ feature.html
│  ├─ forgot-password.html
│  ├─ glassmorphism.html
│  ├─ hamburger-menu.html
│  ├─ hero.html
│  ├─ login.html
│  ├─ modal.html
│  ├─ navbar.html
│  ├─ neumorphic.html
│  ├─ page_not_found_template.html
│  ├─ price_plan.html
│  ├─ professional_temp.html
│  ├─ profile_card.html
│  ├─ quotes.html
│  ├─ register.html
│  ├─ scrollingAnimations.html
│  ├─ social-share-buttons.html
│  ├─ text_effects_anim.html
│  ├─ tilt-card.html
│  ├─ timer.html
│  └─ toggles-and-checkboxes.html
│
├─ Additional Config & Docs
│  ├─ .DS_Store
│  ├─ CARD_SYSTEM_DOCS.md
│  ├─ CODE_OF_CONDUCT.md
│  ├─ CONTRIBUTING.md
│  ├─ LEARN.md
│  ├─ LICENSE
│  ├─ README.md
│
├─ Other HTML, CSS, JS
│  ├─ about.html
│  ├─ blog.html
│  ├─ components.css
│  ├─ components.html
│  ├─ components.js
│  ├─ contact.html
│  ├─ contributors.html
│  ├─ desktop.ini
│  ├─ documentation.html
│  ├─ editor.css
│  ├─ editor.html
│  ├─ editor.js
│  ├─ favicon.png
│  ├─ feedback.html
│  ├─ generate-icons.js
│  ├─ generator.css
│  ├─ generator.html
│  ├─ generator.js
│  ├─ glassmorphismstyle.css
│  ├─ index.css
│  ├─ index.html
│  ├─ index.js
│  ├─ leaderboard.html
│  ├─ loginpage.html
│  ├─ manifest.json
│  ├─ nav.html
│  ├─ navbar-theme.js
│  ├─ navbar_script.js
│  ├─ navbar_styles.css
│  ├─ opaque_hover.html
│  ├─ package-lock.json
│  ├─ playground.html
│  ├─ pomodoro.css
│  ├─ pomodoro.html
│  ├─ pomodoro.js
│  ├─ privacy.html
│  ├─ privacyPolicy.html
│  ├─ script.js
│  ├─ signup.css
│  ├─ signup.html
│  ├─ sitemap.html
│  ├─ styles.css
│  ├─ support.html
│  ├─ templates.css
│  ├─ templates.html
│  ├─ templates.js
│  ├─ test_card_system.html
│  ├─ theme-manager.js
│  ├─ update-html-files.js
│  └─ vercel.json

📱 Browser Compatibility

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+

Contact

📬 Need Help? 💬 Community Support

• Discussions: GitHub Discussions
• Issues: Report Bugs
• Email: Your Email

📚 Learning Resources

• CSS Animations Guide
• JavaScript Animation Basics
• GSAP Animation Library

📄 License

This project is licensed under the MIT License .

🙌 Acknowledgments

💖 Our Amazing Contributors

🌟 Project Admin

Made with ❤ by Anuj and Contributors

⭐ Star This Repository

If you find this project helpful, please give it a star! ⭐