I’m working on a web project where I have a scroll-triggered animation. The bar charts in a graph are supposed to pop up when the user reaches a certain point. The animations aren’t happening as expected because scrollY is always returning 0 unless DevTools is open when I load the page.
HTML:
<div id="bar-chart" class="chart">
<div class="chart-section" data-sales="50">
<img src="/wp-content/uploads/Bill-Clinton.png" alt="Product Image">
<div class="bar"></div>
</div>
<!-- Repeat for other products -->
</div>
CSS:
#bar-chart {
width: 100%; /* Full width to contain horizontally laid out content */
overflow: hidden; /* Hide overflowing content horizontally */
position: relative;
}
.chart-section {
display: flex; /* Use flexbox for horizontal layout */
align-items: center; /* Center items vertically within each section */
justify-content: flex-start; /* Align content to the start of the flex container */
width: 100%; /* Full width for each section */
height: 100%; /* Full viewport height for each section */
visibility: hidden; /* Start with sections hidden */
position: relative; /* Position sections relative within the container */
transition: opacity 1s ease-in-out; /* Smooth transition for appearing */
opacity: 0; /* Start fully transparent */
}
.chart-section img {
width: 300px; /* Fixed width for images */
margin-right: 20px; /* Space between the image and the bar */
z-index:2;
}
.bar {
margin-left:-10vw;
z-index:1;
height: 50px; /* Fixed height for bars */
width: 0; /* Start with zero width */
background: -webkit-radial-gradient(circle, #ecc373 0%, #e7c872 40%, #dab681 60%, #c69d50 100%);
}
JS:
document.addEventListener('DOMContentLoaded', function() {
const sections = document.querySelectorAll('.chart-section');
const topSection = document.querySelector('.elementor-top-section');
let animationStarted = false;
function startAnimation() {
console.log("Animation started");
if (!animationStarted) {
sections.forEach((section, index) => {
const bar = section.querySelector('.bar');
const sales = section.dataset.sales;
bar.style.width = `${sales}%`; // Animate the width of the bar based on sales data
section.style.opacity = '1'; // Make the section visible
section.style.visibility = 'visible'; // Make the section visible
});
animationStarted = true;
}
}
function checkScroll() {
const scrollThreshold = topSection.offsetTop + topSection.clientHeight; // Set scroll threshold to the bottom of the top section
const scrollY = window.scrollY;
if (scrollY > scrollThreshold) {
console.log("Scroll threshold reached");
startAnimation();
window.removeEventListener('scroll', checkScroll); // Remove the scroll event listener once animation started
}
}
window.addEventListener('scroll', checkScroll);
});
I’ve made sure that overflow is set to visible on the HTML and body.
Seeking advice on how to resolve the issue with scrollY returning 0.
Summary: I attempted to implement a scroll-triggered animation on my website using JavaScript. I expected the animation to trigger smoothly as the user scrolled down the page, with elements becoming visible and adjusting dynamically based on the scroll position. However, I encountered an issue where the scrollY property always returned 0 unless DevTools was open. The animation only works when DevTools is active, leading to inconsistent behavior.