saseklab/zariah-construction

Known Issues & Solutions - Zariah Construction Project

WOW.js Animation Classes Causing Invisible Images

Problem Description

When converting HTML templates to React + Vite, images with wow animation classes (specifically img-custom-anim-left, img-custom-anim-right, img-custom-anim-top) were not visible on the page. The images appeared in the DOM but had opacity: 0, making them invisible to users.

Root Cause

The custom CSS animation classes set opacity: 0 initially:

.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;  /* <-- This causes the issue */
}

The animations rely on WOW.js to trigger and set the opacity back to 1. However, when elements are already in the viewport on page load (common in SPA routing), WOW.js doesn't trigger the animation, leaving elements with opacity: 0.

Affected Files

• src/components/sections/Faq.jsx - FAQ image
• src/components/sections/About.jsx - About section images (2 images)
• src/components/sections/Purposes.jsx - Purposes image
• src/components/sections/Cta.jsx - CTA image

Solution

Remove the problematic animation classes from image elements:

Before:

<div className="faq-image wow img-custom-anim-left">
  <img src={faqImage} alt="FAQ" />
</div>

After:

<div className="faq-image">
  <img src={faqImage} alt="FAQ" />
</div>

Alternative Solutions

If you want to keep the animations:

1. Use different animation classes that don't set opacity: 0:

   • wow fadeInUp (from animate.css) - only animates transform
   • These work correctly with WOW.js

2. Manually trigger WOW.js after component mount:

   useEffect(() => {
     if (window.WOW) {
       new window.WOW().init()
     }
   }, [])
   

3. Use CSS-in-JS or styled-components to conditionally apply animations

Additional CSS Fix for FAQ Section

The FAQ image also needed a z-index fix to appear above the orange overlay:

/* In src/styles/main.css around line 3320 */
.faq-wrapper-new .faq-image {
  max-width: 570px;
  position: relative;  /* Added */
  z-index: 9;         /* Added - places image above ::before overlay */
}

Testing Checklist

After fixing animation issues, verify:

• [ ] All images are visible (opacity: 1)
• [ ] Images appear above background overlays
• [ ] Images display on first page load
• [ ] Images display after navigation (SPA routing)
• [ ] No console errors related to missing assets

Quick Verification Script

Run this in browser console to check image opacity:

document.querySelectorAll('img').forEach(img => {
  const opacity = window.getComputedStyle(img).opacity;
  if (opacity === '0') {
    console.log('Hidden image:', img.src, img.parentElement);
  }
});

---

Other Common Issues

Image Import Path Errors

Problem: Images not loading - Failed to resolve import errors

Solution: Use correct relative paths from src/components/sections/:

// CORRECT (2 levels up to src, then into assets)
import heroBg from '../../assets/img/home-1/hero/hero-bg.jpg'

// WRONG (only 1 level up)
import heroBg from '../assets/img/home-1/hero/hero-bg.jpg'

CSS Source Map Warnings

Problem: SourceMap warnings for CSS files

Solution: Remove sourceMappingURL comments from CSS files:

/* Remove this line: */
/*# sourceMappingURL=bootstrap.min.css.map */