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.
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
.
src/components/sections/Faq.jsx
- FAQ imagesrc/components/sections/About.jsx
- About section images (2 images)src/components/sections/Purposes.jsx
- Purposes imagesrc/components/sections/Cta.jsx
- CTA image
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>
If you want to keep the animations:
-
Use different animation classes that don't set
opacity: 0
:
wow fadeInUp
(from animate.css) - only animates transform- These work correctly with WOW.js
-
Manually trigger WOW.js after component mount:
useEffect(() => {
if (window.WOW) {
new window.WOW().init()
}
}, [])
-
Use CSS-in-JS or styled-components to conditionally apply animations
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 */
}
After fixing animation issues, verify:
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);
}
});
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'
Problem:
SourceMap
warnings for CSS files
Solution: Remove sourceMappingURL comments from CSS files:
/* Remove this line: */
/*# sourceMappingURL=bootstrap.min.css.map */