🧸 LightBulb_Animation

An animated, interactive toggle switch built with HTML, CSS, and JavaScript, featuring a bear, a swinging lightbulb, and a responsive cord mechanism. This project uses GSAP and Draggable to create a smooth, playful scene where a virtual bear reacts to the user's actions—with increasing annoyance!

---

💡 Features

• Interactive lightbulb switch via a draggable cord.
• Bear animation triggered by toggling the switch.
• Smooth GSAP animations and Draggable plugin integration.
• CSS-driven bulb glow, cord movement, and 3D door styling.
• Fun anger-based state system with visual feedback (eyebrows, sounds, movement).

---

📁 File Structure

📁 project-root/
├── index.html         # Main HTML structure and SVG elements
├── style.css          # Toggle switch styles, cord, bulb, bear, door
├── script.js          # GSAP timelines, drag behavior, animations
├── /assets            # (Optional) Sounds, images, etc.

---

🚀 Technologies Used

• HTML5 / CSS3
• JavaScript (ES6+)
• GSAP Draggable Plugin

---

🧪 How It Works

• A hidden checkbox triggers the bulb state (on/off).
• SVG + CSS form the environment (cord, bulb, bear, door).
• Drag the cord to toggle the switch.
• The bear reacts with animations and increasing frustration each time.
• Optional sound effects enhance the feedback.

---

▶️ Getting Started

1. Clone this repository:

   https://github.com/logusivam/LightBulb_Animation.git
   cd LightBulb_Animation

2. Open index.html in a browser:

   open index.html

✅ No build tools or dependencies required — everything runs in the browser.

---

📸 Preview

---

🙃 Credits

• @Loganathan.
• Animation magic via GSAP.

---

📝 License

MIT License. Use, fork, and modify freely. Just don’t make the bear angrier. 😤