I’ve been trying to make a scroll animation where when the text scrolls to a certain point, the image next to the text switches when it reaches a new part of the text.
But the code doesn’t work at all and I can’t seem to figure out why
This is the code:
$(“.Scroll Section”).each(function (index) {
let childTriggers = $(this).find(“.Text-list”);
let childTargets = $(this).find(“.scroll-item”);
// switch active class
function makeItemActive(index) {
childTriggers.removeClass(“is-active”);
childTargets.removeClass(“is-active”);
childTriggers.eq(index).addClass(“is-active”);
childTargets.eq(index).addClass(“is-active”);
}
makeItemActive(0);
// create triggers
childTriggers.each(function (index) {
ScrollTrigger.create({
trigger: $(this),
start: “top center”,
end: “bottom center”,
markers: true,
onToggle: (isActive) => {
if (isActive) {
makeItemActive(index);
}
}
});
});
Here is my site Read-Only: LINK
(how to share your site Read-Only link)