Question:
How to change image instantly upon scrolling and have a smoother transition in my code
Product:
Wix Editor
What are you trying to achieve:
Hi, there i am trying to figure out how to change images instantly upon scrolling the window, i have written the code for changing the index of the image array upon scrolling but the transition between images is not smooth, help me please
What have you already tried:
i have tried by using image.src= images[imageIndex] but the transition is not happening smoothly
Additional information:
Here’s the code
import wixWindowFrontend from ‘wix-window-frontend’;
let imageIndex = 0;
let images = ;
let scrollAnimInterval;
let imageModifier=10;
let maxRepeaterLength;
let tickInterval = 1;
let scrollPosCurrent;
let scrollPosPrevious;
$w.onReady(function () {
images = getImages();
const frequency = 1; // can range from 0 to 1
const slicedImages = images.slice(0, images.length / frequency); // this will influence the scroll size, the more we slice, the less the repeaters and the less
$w(“#repeaterBox”).data = slicedImages.map((image, index) => ({ _id: index.toString(), src: image }));
$w(“#repeaterBox”).onItemReady(($item, itemData, index) => {
maxRepeaterLength = $w(“#repeaterBox”).data.length - 1;
});
$w(“#sectionScroll”).onViewportEnter((event) => {
if (!scrollAnimInterval) {
scrollAnimInterval = setInterval(getImageScroll,tickInterval); //execute for every 1 millisecond
}
})
$w(“#sectionScroll”).onViewportLeave((event) => {
clearInterval(scrollAnimInterval);
scrollAnimInterval = null;
});
});
// Function to handle scroll events and update the image index
function getImageScroll() {
wixWindowFrontend.getBoundingRect().then((windowSizeInfo) => {
scrollPosCurrent = windowSizeInfo.scroll.y - windowSizeInfo.window.height;
if (scrollPosCurrent == scrollPosPrevious) {
return;
}
scrollPosPrevious = scrollPosCurrent;
let index = Math.floor(scrollPosCurrent / imageModifier);
if (index < 0) {
index = 0;
} else if (index > maxRepeaterLength) {
index = maxRepeaterLength;
}
imageIndex=index;
console.log(“Current Index”,index);
$w(“#imageScroll”).src=images[imageIndex];
})
}
//function to get images
function getImages() {
return data.trim().split(/\s+/);
}