dynamic digital signage solution that displays animated SVG visuals as "motion videos" on a rotating loop. The project is built with HTML, CSS, JavaScript (GSAP for animation), SVG graphics, and a PHP backend to load dynamic content.

🎯 Objective

To design a lightweight, visually engaging digital signage display system that:

• Plays animated SVG sequences (like short motion videos).
• Rotates between 3 different animated slides.
• Loads content dynamically through a backend (PHP + JSON).
• Is scalable and responsive for large screens.

🧩 Tools & Technologies

• Frontend: HTML5, CSS3, JavaScript (GSAP), SVG
• Backend: PHP (for loading content)
• Content Source: JSON file (simulating a database/API)
• Graphics: Vector SVGs (exported and animated for web)

🔄 Process

1. Research & Planning

• Studied commercial digital signage patterns in malls and restaurants.
• Chose SVG for high-performance animations without video encoding overhead.
• Decided on 3 animated slides representing different categories (e.g. Food, Travel, Tech).

2. Design & SVG Animation

• Created SVGs in Adobe Illustrator and exported them web-optimized.
• Used GSAP to animate individual elements (e.g., rotating, pulsing, path animations).

3. Code Implementation

• HTML structure with individual sections for each SVG animation.
• CSS for styling, transitions, and screen scaling.
• JavaScript for carousel behavior and GSAP for motion animation.
• PHP backend fetches content (like titles, descriptions, colors) from a JSON file to make the display dynamic.

4. Dynamic Content Loading

• index.php fetches content from content.json.
• Looping through PHP arrays populates data in HTML dynamically.
• This setup can be extended to a database like MySQL.

🧪 Challenges

• SVG Complexity: Needed to carefully optimize SVG paths for smoother animation.
• Performance: Had to test on Raspberry Pi and Smart TV browsers for signage compatibility.
• Timing Logic: Built JS logic to time animations in looped sequences with smooth transitions.

🚀 Results

• Delivered a responsive and visually dynamic digital signage solution.
• Animation ran consistently at 60FPS on large digital displays.
• PHP backend ensures content can be updated remotely by non-tech users.